Problems when building with vite 6.x.x

[steinarb]

Starting with vite 6.0.0 my applications using redux-first-history 5.2.0 get the following stack trace on startup:

chunk-K6AXKMTT.mjs:182 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (chunk-K6AXKMTT.mjs:182:11)
    at useRoutesImpl (chunk-K6AXKMTT.mjs:4200:3)
    at useRoutes (chunk-K6AXKMTT.mjs:4197:10)
    at Routes (chunk-K6AXKMTT.mjs:5045:10)
    at renderWithHooks (react-dom-client.production.js:3681:21)
    at updateFunctionComponent (react-dom-client.production.js:5637:15)
    at beginWork (react-dom-client.production.js:6666:14)
    at performUnitOfWork (react-dom-client.production.js:10860:14)
    at workLoopSync (react-dom-client.production.js:10743:37)
    at renderRootSync (react-dom-client.production.js:10724:20)

When building with the last v5 vite (5.4.14 at the time of writing), the application starts up normally.

Googling the error message gives me matches like this https://stackoverflow.com/a/69796015 (that the router is missing)
So maybe (just a guess), with vite 6.x.x HistoryRouter is no longer recognized as a router...?

[steinarb]

I have pushed a repro on https://github.com/steinarb/handlereg/tree/redux-first-history-issue-137

To run it you need java sdk and maven installed:

1. Clone and build

   mkdir -p ~/git
   cd ~/git
   git clone https://github.com/steinarb/handlereg.git
   git checkout redux-first-history-137
   mvn install
   

2. Download apache karaf and follow the instructions of "start the server" https://karaf.apache.org/manual/latest/quick-start.html
3. From the karaf command line install the app

   feature:repo-add mvn:no.priv.bang.handlereg/karaf/LATEST/xml/features
   feature:install handlereg-with-derby
   

4. Open http://localhost:8181/handlereg to see the error

The frontend is here in the code: https://github.com/steinarb/handlereg/tree/redux-first-history-issue-137/handlereg.web.frontend/src/main/frontend

[steinarb]

Found this https://stackoverflow.com/a/69796015

Tried the suggested workaround: move <Router> to outside of the <App> component: steinarb/handlereg@d257d9d

Didn't make any difference. Still got the following error in the console:

chunk-K6AXKMTT.mjs:182 Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    at invariant (chunk-K6AXKMTT.mjs:182:11)
    at useRoutesImpl (chunk-K6AXKMTT.mjs:4200:3)
    at useRoutes (chunk-K6AXKMTT.mjs:4197:10)
    at Routes (chunk-K6AXKMTT.mjs:5045:10)
    at renderWithHooks (react-dom-client.production.js:3681:21)
    at updateFunctionComponent (react-dom-client.production.js:5637:15)
    at beginWork (react-dom-client.production.js:6666:14)
    at performUnitOfWork (react-dom-client.production.js:10860:14)
    at workLoopSync (react-dom-client.production.js:10743:37)
    at renderRootSync (react-dom-client.production.js:10724:20)

[steinarb]

This is where the error message originates: https://github.com/remix-run/react-router/blob/e099d6927c7ea2bd97bae015e32fa96a6b0c84e0/packages/react-router/lib/hooks.tsx#L438

[steinarb]

Looks like useInRouterContext() is false and the error message is output when this is null

React.useContext(LocationContext)

https://github.com/remix-run/react-router/blob/e099d6927c7ea2bd97bae015e32fa96a6b0c84e0/packages/react-router/lib/hooks.tsx#L105

So possibly HistoryRouter doesn't set up LocationContext?

[steinarb]

This stack overflow answer from April 9 2022 is interesting https://stackoverflow.com/a/71812298

The stackoverflow answer says: "I had this error because Vite was bundling two copies of the same version of react-router-dom... check the outputted bundle for * React Router DOM and see how many copies there are."

And indeed the assets/index.js (which is vite's "bundle.js" equivalent) contains two copies of react-router, e.g. searching for "useLocation" in assets/index.js lists this:

  19052:function useLocation() {
  19057:    `useLocation() may be used only in the context of a <Router> component.`
  19082:  let { pathname: locationPathname } = useLocation();
  19124:  let { pathname: locationPathname } = useLocation();
  19164:  let locationFromContext = useLocation();
  19972:  let location2 = useLocation();
  20159:    let location2 = useLocation();
  20281:  let location2 = useLocation();
  20360:  let location2 = useLocation();
  20557:    useLocation: () => useLocation2,
  25394:  function useLocation2() {
  25399:      `useLocation() may be used only in the context of a <Router> component.`
  ...

At a guess HistoryRouter uses the one with the "2" suffix and therefore doesn't appear to be a router to the code using the version without the suffix....?

But I have no idea what causes it and no idea how to do a workaround.

[steinarb]

I searched for react-router on the vite github discussions and fond this topic: vitejs/vite#13390

I found this reply vitejs/vite#13390 (comment) saying "I guess you need to add react-router and react-router-dom to build.rollupOptions.external."

So I tried adding react-router to build..rollupOptions.external in vite.config.js:

        rollupOptions: {
            // overwrite default .html entry
            input: 'src/index.js',
            output: {
                entryFileNames: `assets/[name].js`,
                chunkFileNames: `assets/[name].js`,
                assetFileNames: `assets/[name].[ext]`
            },
            external: [ 'react-router' ]
        },

This slimmed down assets/index.js quite a bit (instead of there being duplicate react-router stuff there is now no react-router stuff), but this gives the following error in the console :

index.js:4 Uncaught SyntaxError: Cannot use import statement outside a module (at index.js:4:1)

which is this line failing to import stuff react-router

import require$$1, { Link, Routes, Route } from "react-router";

(maybe not so strange if react-router isn't there...?)

[steinarb]

Started a topic in vite discussions vitejs/vite#20180

[steinarb]

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 apps using redux-first-history with vite 7.0.1 and vite 7.0.2.

Same error in both vite versions.