Reactivue beta: Got error upon returning to current page from navigation (w/ react router)

[keith0305]

Context: Yesterday I reported a compatibility issue with latest Pinia and Vue, where @sibbng directed me to the beta version of this project. So I tested it out, Pinia works, never had any issue until I tried using react router.

Step by step to reproduce using the react playground example:

1. Install react-router-dom, put the current App.tsx as index route, and create a new route.
   (Note: the goal is to create two routes that we can navigate between)
2. Run the dev server, nagivate to localhost.
3. Navigate away from current page.
4. Come back to current page (using back button works as well), at this point, the error would appear in the console and the page would be blank.

TLDR:

Navigate away and come back to current page with react-router-dom. Pinia and VueUse-Head will break.

Error message:

[Vue warn]: injection "usehead" not found.
Uncaught Error: You may forget to apply app.use(head)
[Vue warn]: injection "Symbol(pinia)" not found.
Uncaught Error: Cannot detect villus Client, did you forget to call `useClient`?
The above error occurred in one of your React components:
defineComponent/<@http://localhost:3001/node_modules/.vite/reactivue.js?v=1936c300:120:27
...

Let me know if you need a CodeSandbox, I can create one.

Edit: Added more details of which files has changed, as below,

package.json

• Added "react-router-dom": "^6.2.2",

App.tsx

• Moved existing code to a new file, and added the following:

import type { ReactElement } from 'react'
import { lazy, Suspense } from 'react'
import { BrowserRouter, Route, Routes } from 'react-router-dom'

const Home = lazy(async () => import('./pages/home'))
const PageB = lazy(async () => import('./pages/pageB'))

export default function App(): ReactElement {
  return (
    <BrowserRouter>
      <Suspense fallback={<div className="text-center py-16">...</div>}>
        <Routes>
          <Route path='/' element={<Home />} />
          <Route path='/pageB' element={<PageB />} />
        </Routes>
      </Suspense>
    </BrowserRouter>
  )
}

[sibbng]

Let me know if you need a CodeSandbox, I can create one.

That would be great.

[keith0305]

Let me know if you need a CodeSandbox, I can create one.

That would be great.

Please see https://codesandbox.io/s/cocky-meadow-h5205z?file=%2Fsrc%2Fpages%2Fhome.tsx

Click the "Go to pageB" button, and then click "Back to Home" button.

[sibbng]

Fixed in 1.0.0-beta.6. Please run pnpm add reactivue@beta to install latest beta. Thanks for bug report.

[keith0305]

Ok now the error message is gone, but upon returning to the current page, after interacting with Pinia (data and UI seems to be working fine), I get the following error:

Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Reproducible in the same CodeSandBox link, I've updated that to reactivue beta6.

[sibbng]

I fixed this error in 1.0.0-beta.7. FYI this warning is removed in React 18 for a few reasons. I assume our use case aligns with them.

[keith0305]

I have updated react to v18 and indeed the error message is gone. Closing this for now, thanks for fixing.