react-router does not work after building vite

[Dmitriy-Krivetsky]

I have two Core packages and my package.
The Core package contains the following functionality:

// Core package (Core.jsx)
import React from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';

export const Core = ({ children }) => {
  return (
    <HashRouter>
      <Routes>
        <Route element={children} />
      </Routes>
    </HashRouter>
  );
};

// My package (App.jsx)
import React from 'react';
import CustomComponent from './CustomComponent';
import { Core } from 'core-package';

const App = () => {
  return (
    <Core>
      <CustomComponent />
    </Core>
  );
};

export default App;

// My package (CustomComponent.jsx)
import React from 'react';
import { useLocation } from 'react-router-dom';

const CustomComponent = () => {
  const location = useLocation(); // <-- Uncaught Error: useLocation() may be used only in the context of a <Router> component.
  return <h1>This is the main content of your application.</h1>;
};

export default CustomComponent;

If you reproduce this code within one package, the code will work
But if the Core.jsx file is moved to the Core package - this code will cause an error ("Uncaught Error: useLocation() may be used only in the context of a component")

// Core package (vite.config.js)
export default defineConfig({
  plugins: [
    react(),
    svgrPlugin(),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/lib/index.js"),
      name: "core-package",
      fileName: "index",
    },
    rollupOptions: {
      external: ["react"],
      output: {
        globals: {
          react: "React",
        },
      },
    },
  },
});

"react": "^18.2.0",
"vite": "^4.3.8",
"react-router-dom": "^6.3.0",

[sapphi-red]

I guess you need to add react-router and react-router-dom to build.rollupOptions.external.

[bilalbhojani24]

@Dmitriy-Krivetsky even I am facing the same error. Here is the discussion link. Any lucks here ?

[moussa32]

I got an error in production
Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".

[moneymaker24]

@moussa32 did u find a solution for ur Relative references must start with either "/", "./", or "../". error ?

[moussa32]

@moneymaker24 No, I didn't find any solution for this problem so I ended up dropping using rollupOptions but I was lucky because my main problem routing didn't work after building the project because the backend server was overwriting on my project so I told the backend developer to stop handling routing from the server and let the frontend do it and VOLA the issue has been solved

[ThisIsLoui]

@moneymaker24 I am getting the same error too, have you found a solution?

[skverma618]

I have two Core packages and my package. The Core package contains the following functionality:

// Core package (Core.jsx)
import React from 'react';
import { HashRouter, Routes, Route } from 'react-router-dom';

export const Core = ({ children }) => {
  return (
    <HashRouter>
      <Routes>
        <Route element={children} />
      </Routes>
    </HashRouter>
  );
};

// My package (App.jsx)
import React from 'react';
import CustomComponent from './CustomComponent';
import { Core } from 'core-package';

const App = () => {
  return (
    <Core>
      <CustomComponent />
    </Core>
  );
};

export default App;

// My package (CustomComponent.jsx)
import React from 'react';
import { useLocation } from 'react-router-dom';

const CustomComponent = () => {
  const location = useLocation(); // <-- Uncaught Error: useLocation() may be used only in the context of a <Router> component.
  return <h1>This is the main content of your application.</h1>;
};

export default CustomComponent;

If you reproduce this code within one package, the code will work But if the Core.jsx file is moved to the Core package - this code will cause an error ("Uncaught Error: useLocation() may be used only in the context of a component")

// Core package (vite.config.js)
export default defineConfig({
  plugins: [
    react(),
    svgrPlugin(),
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/lib/index.js"),
      name: "core-package",
      fileName: "index",
    },
    rollupOptions: {
      external: ["react"],
      output: {
        globals: {
          react: "React",
        },
      },
    },
  },
});

"react": "^18.2.0",
"vite": "^4.3.8",
"react-router-dom": "^6.3.0",

gettin' the following error after changing config file as mentioned :

failed to load config from C:\xampp\htdocs\Laravel\chirper\react\vite.config.js error when starting dev server: ReferenceError: resolve is not defined at file:///C:/xampp/htdocs/Laravel/chirper/react/vite.config.js.timestamp-1688838572068-65f66a93d3faf.mjs:12:14 at ModuleJob.run (node:internal/modules/esm/module_job:194:25)

[uttampun44]

For vite react router you should write this command then it will work

https://reactrouter.com/en/main/start/tutorial here is the link

[dohomi]

I bump into this exact issue while using vite 5 and react-router-dom. I use a monorepo and the useNavigate function breaks only in production, the development mode works fine.
If I add

 rollupOptions: {
            external: ["react", "react-router", "react-router-dom"],
            output: {
                globals: {
                    react: "React",
                },
            },
        },

then the app does not start at all in production - probably because react and react-router are missing.

Is there a solution to run Vite in a monorepo setup?

[uttampun44]

There is new react router package for vite. I am using and working fine.

[bilalbhojani24]

@uttampun44 Do share the packageName, but IMO you can face such issues with other packages as well.

[dohomi]

yes I think it happens on @mui provider or any other lib provider. My solution to get around it - to always export the provider from the packages folder. This way the context remains same

[uttampun44]

@bilalbhojani24 npm install react-router-dom localforage match-sorter sort-by use this package this is work for vite

[uwemneku]

Had the same issue while working in a mono-repo with vite v5.2.10. I used a Link component in a package but when I imported it into the app, it crashes in prod.

In my case the solution was to

• delete all node modules folders
• move react-router into a peerDependencies
• reinstall all dependencies

After that things worked fine on prod

[wildindie]

does it work

[dohomi]

somehow the context of react-router-dom was lost in my components. I moved all files to the monorepo packages folder - that works.
I honestly think this is only because of the use of mono repo

[uwemneku]

Yup, having the same issue. Using Link in the main app work perfectly but using it in a component workspace and importing that component into the main app breaks the app in prod.

[last-Programmer]

I am also getting this error. i can solve it by doing this

                    // Enable code splitting with manual chunks to ensure react-router stays in vendor bundle
                    manualChunks: (id) => {
                        // Keep react-router and react-router-dom in the vendor bundle
                        if (id.includes('node_modules')) {
                            return 'vendor';
                        }
                    }

Is it possible to fix without doing this chunking behaviour? I am getting this error in the new vite beta 8 with rolldown. When i used rolldown as a bundler without vite it is working fine.

Thanks