Problems building apps using redux-first-history and react-router with vite 6.x.x

[steinarb]

In January 2025 I switched from vite 5.x to 6.x in my builds and got the following stack trace in the console:

chunk-NL6KNZEE.mjs:188 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (chunk-NL6KNZEE.mjs:188:11)
    at useRoutesImpl (chunk-NL6KNZEE.mjs:4951:3)
    at useRoutes (chunk-NL6KNZEE.mjs:4948:10)
    at Routes (chunk-NL6KNZEE.mjs:5799:10)
    at renderWithHooks (react-dom-client.production.js:3502:21)
    at updateFunctionComponent (react-dom-client.production.js:6239:15)
    at beginWork (react-dom-client.production.js:7243:14)
    at performUnitOfWork (react-dom-client.production.js:10855:14)
    at workLoopSync (react-dom-client.production.js:10736:37)
    at renderRootSync (react-dom-client.production.js:10717:20)

The reason this happens is that HistoryRouter from redux-first-history is no longer recognized as a react-router.

Switching back to building with vite 5.x makes things work again (i.e. HistoryRouter from redux-first-history is accepted as a react-router).

Back in january I opened this issue on react-router-redux but nothing have happened there and none of my own investigations have brought fruit (my investigations are added as comments to redux-first-history issue 137).

So I'm trying my luck here. Ideas, workarounds and fixes are all welcome!

Thanks!

PS the most likely cause (from my investigations) seems to be that with vite 6.x, assets/index.js gets multiple versions of react-router and redux-first-history uses a different react-router version than the regular one. But why this happens and what to do with it is not clear.

[steinarb]

Just a note that the useLocation() may be used only in the context of a <Router> component problem is still present when building with vite 7.x.x.

I have tried building react apps using redux-first-history with vite 7.0.1 and vite 7.0.2.

Same error in both vite versions.