Router returns error but works just fine when I compile the app
Problem Description:
I have the following router
const router = createBrowserRouter(
createRoutesFromElements(
<>
<Route path="/login" element={<LoginPage />} />
<Route errorElement={<ErrorView />} path="/" element={<Layout />}>
<Route path="/stacks" element={<StackList />} />
<Route path="/stacks/:name" element={<StackDetails />} />
<Route path="/instances" element={<InstancesList />} />
<Route path="/new" element={<NewInstance />} />
</Route>
</>
)
)
But when I run "yarn start" I get the following error
ERROR in src/index.tsx:18:5
TS2345: Argument of type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/dist/lib/context").RouteObject[]' is not assignable to parameter of type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router-dom/node_modules/react-router/dist/lib/context").RouteObject[]'.
Type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/dist/lib/context").RouteObject' is not assignable to type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router-dom/node_modules/react-router/dist/lib/context").RouteObject'.
Type 'IndexRouteObject' is not assignable to type 'RouteObject'.
Type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/dist/lib/context").IndexRouteObject' is not assignable to type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router-dom/node_modules/react-router/dist/lib/context").IndexRouteObject'.
Types of property 'shouldRevalidate' are incompatible.
Type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/node_modules/@remix-run/router/dist/utils").ShouldRevalidateFunction' is not assignable to type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/@remix-run/router/dist/utils").ShouldRevalidateFunction'.
Types of parameters 'args' and 'args' are incompatible.
Type '{ currentUrl: URL; currentParams: import("/home/tons/IdeaProjects/im-web-client/node_modules/@remix-run/router/dist/utils").Params<string>; nextUrl: URL; nextParams: import("/home/tons/IdeaProjects/im-web-client/node_modules/@remix-run/router/dist/utils").Params<...>; ... 5 more ...; defaultShouldRevalidate: boolean...' is not assignable to type '{ currentUrl: URL; currentParams: import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/node_modules/@remix-run/router/dist/utils").Params<string>; ... 7 more ...; defaultShouldRevalidate: boolean; }'.
Types of property 'actionResult' are incompatible.
Type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/@remix-run/router/dist/utils").DataResult' is not assignable to type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/node_modules/@remix-run/router/dist/utils").DataResult'.
Type 'DeferredResult' is not assignable to type 'DataResult'.
Type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/@remix-run/router/dist/utils").DeferredResult' is not assignable to type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/node_modules/@remix-run/router/dist/utils").DeferredResult'.
Types of property 'deferredData' are incompatible.
Type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/@remix-run/router/dist/utils").DeferredData' is not assignable to type 'import("/home/tons/IdeaProjects/im-web-client/node_modules/react-router/node_modules/@remix-run/router/dist/utils").DeferredData'.
Types have separate declarations of a private property 'pendingKeys'.
16 |
17 | const router = createBrowserRouter(
> 18 | createRoutesFromElements(
| ^^^^^^^^^^^^^^^^^^^^^^^^^
> 19 | <>
| ^^^^^^^^^^
> 20 | <Route path="/login" element={<LoginPage />} />
| ^^^^^^^^^^
> 21 | <Route errorElement={<ErrorView />} path="/" element={<Layout />}>
| ^^^^^^^^^^
> 22 | <Route path="/stacks" element={<StackList />} />
| ^^^^^^^^^^
> 23 | <Route path="/stacks/:name" element={<StackDetails />} />
| ^^^^^^^^^^
> 24 | <Route path="/instances" element={<InstancesList />} />
| ^^^^^^^^^^
> 25 | <Route path="/new" element={<NewInstance />} />
| ^^^^^^^^^^
> 26 | </Route>
| ^^^^^^^^^^
> 27 | </>
| ^^^^^^^^^^
> 28 | )
| ^^^^^^
29 | )
30 |
31 | const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
Anyone here who got an idea about what’s wrong?
UPDATE – include package.json
{
"name": "instance-manager",
"version": "0.1.0",
"private": true,
"dependencies": {
"@dhis2/app-runtime": "^3.6.1",
"@dhis2/d2-i18n": "^1.1.0",
"@dhis2/ui": "^8.6.0",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.18.0",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.9",
"@types/react-router-dom": "^5.3.3",
"axios": "^1.1.3",
"react": "^18.2.0",
"react-auth-kit": "^2.6.0",
"react-dom": "^18.2.0",
"react-router": "^6.4.3",
"react-router-dom": "^6.4.2",
"react-scripts": "5.0.1",
"styled-jsx": "^5.1.0",
"typescript": "^4.8.4",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"format": "yarn d2-style apply"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"@dhis2/cli-style": "^10.4.2"
}
}
Solution – 1
Looks like you’ve mixed versions of some dependencies. react-router-dom@6 is complete written in Typescript, so there’s no need to include @types/react-router-dom as a dependency, especially since it’s the RRDv5 type bindings. I suspect this is messing with the development builds.
To uninstall the old dependency that is no longer required, run:
npm uninstall --save @types/react-router-dom
react-router-dom also re-exports everything from react-router that I’m aware of, so you don’t necessarily need that dependency either, remove it with:
npm un -s react-router
or at a minimum if you have both you should ensure they are on the same version:
npm i -s react-router@6 react-router-dom@6
This will install the latest v6 version for both. OFC you can always be more specific with the versioning if you need.