react-router does not work after building vite #13390
-
I have two Core packages and my package. // 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 // 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",
},
},
},
},
});
|
Beta Was this translation helpful? Give feedback.
Replies: 7 comments 12 replies
-
I guess you need to add |
Beta Was this translation helpful? Give feedback.
-
gettin' the following error after changing config file as mentioned :
|
Beta Was this translation helpful? Give feedback.
-
For vite react router you should write this command then it will work https://reactrouter.com/en/main/start/tutorial here is the link |
Beta Was this translation helpful? Give feedback.
-
If you guys are having the same problems, check out the Vite's own tutorial here: https://vitejs.dev/guide/build.html#multi-page-app. |
Beta Was this translation helpful? Give feedback.
-
I bump into this exact issue while using vite 5 and react-router-dom. I use a monorepo and the
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? |
Beta Was this translation helpful? Give feedback.
-
does it work |
Beta Was this translation helpful? Give feedback.
-
somehow the context of react-router-dom was lost in my components. I moved all files to the monorepo packages folder - that works. |
Beta Was this translation helpful? Give feedback.
I guess you need to add
react-router
andreact-router-dom
tobuild.rollupOptions.external
.