ViteJS - Uncaught Error: useRoutes() may be used only in the context of a <Router> component

[bhaskarmurthy]

What you were expecting:
react-admin should render as expected

What happened instead:
react-router does not render any routes, and instead throws an exception:

Uncaught Error: useRoutes() may be used only in the context of a <Router> component

Steps to reproduce:

1. Set up a new Vite project using react-ts template
2. Follow tutorial to set up a react-admin component
3. Launch app

Related code:

• Preferably, a CodeSandbox forked from
  • https://codesandbox.io/s/github/marmelab/react-admin/tree/master/examples/simple (v4)
  • https://codesandbox.io/s/github/marmelab/react-admin/tree/3.x/examples/simple (v3)
• A link to a GitHub repo with the minimal codebase to reproduce the issue

insert short code snippets here

Other information:

Environment

• React-admin version:
• Last version that did not exhibit the issue (if applicable):
• React version:
• Browser:
• Stack trace (in case of a JS error):

Uncaught Error: useRoutes() may be used only in the context of a <Router> component.
    invariant index.tsx:24
    useRoutes index.tsx:642
    Routes index.tsx:344
    React 12
    unstable_runWithPriority scheduler.development.js:468
    React 4
    unstable_runWithPriority scheduler.development.js:468
    React 3
    workLoop scheduler.development.js:417
    flushWork scheduler.development.js:390
    performWorkUntilDeadline scheduler.development.js:157
    js scheduler.development.js:180
    js scheduler.development.js:645
    __require chunk-CEDYW5NB.js:11
    js index.js:6
    __require chunk-CEDYW5NB.js:11
    React 2
    __require chunk-CEDYW5NB.js:11
    js React
    __require chunk-CEDYW5NB.js:11
    <anonymous> react-dom:1
index.tsx:24:19

[antoinefricker]

Thanks for your report. We'lll take a look at this.

[antoinefricker]

I went through the first steps of the tutorial without any trouble.
Here is a small test repository, please give it a try.

[bhaskarmurthy]

Thanks @septentrion-730n . Will investigate a bit more on my end. Appreciate the quick turnaround!

[antoinefricker]

I'll set this as "closed" - will reopen it if required!

[MBach]

I'm starting to have this bug with react-router-dom: 6.4.0 @septentrion-730n

[fzaninotto]

@MBach Please provide a reproduction if you think this is a react-admin bug.

[MBach]

@MBach Please provide a reproduction if you think this is a react-admin bug.

Well, currently I'm short in time, like most of us, but I'll try to create a repro.

[crates]

I'm also having a very similar bug to this with react-router-dom 6.4.1 - if you need to reproduce, just upgrade any of your own React Admin projects (that use useRoutes or useLocation) to the same version of React Router DOM, and it should occur.

I'm also getting this error after upgrading React Router DOM:
[Route] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

[fzaninotto]

Confirmed: react-router 6.4.1 breaks react-admin. Reopening and marking this as a bug.

[fzaninotto]

Nope, I was wrong: react-admin works well with react-router 6.4.1.

This error occurs if there are several instances of react-router or react-router-dom in your project. This is probably because you added react-router as a direct dependency in your project, and somehow the npm/yarn resolution ended with 2 versions of the library.

React-router uses a singleton - this is a limitation of the library.

So you have to fix that on your side, there is nothing that react-admin can do.

[crates]

@fzaninotto -

I hear you. I tried reproducing this error with a fresh clone of one of the repositories above. I couldn't get the bug to manifest in the repro, and that does make it seem like the issue isn't with React Admin. But, I've been maintaining our React Admin project for about 2 years now, and we've never had this problem before. It's a fairly sophisticated project with a decently-large scope. (I've been in talks with our company for a couple of months to get us an enterprise license as well, by the way... it's just that we're a huge company and things move really slow.)

The thing is, we didn't have any problems like this for the last couple of years we've been using React Admin. We didn't have these problems when we finished the upgrade from version 3 to version 4 of React Admin (and upgraded React Router to version 6, as well). The only time we have these unique errors is when we upgrade from version 6.3.0 of React Router to version 6.4.x, and the errors are coming from somewhere inside React Admin. It's something to do with the context from React Router not making it through into the Admin component. When we downgraded back to 6.3.0 of React Router, all of these strange bugs went away again.

Moreover, when I run npm ls, I don't see any competing versions of React Router - just whichever one is in our package.json at the time (6.3.0 when it's working, and 6.4.1 when it's broken). And what's more, I'm the third person on this ticket reporting basically identical issues... so it seems a bit dismissive to assume we're all doing this wrong. Our projects worked fine until we upgraded React Router. Is it possible there's some kind of important difference (or bug) in the latest version that hasn't yet been addressed in React Admin?

[crates]

@MBach / @bhaskarmurthy -

Boy, do I feel foolish. @fzaninotto was 100% correct: this bug had nothing to do with React Admin (at least, for me). Up until React Router v6.4.x it was possible to import the Route component from react-router without any breaking issues. As of the latest version, however, you need to correctly import it from react-router-dom instead. In fact, this has been the correct way to do things for a while now. It's further complicated and confusing because it's still possible to import it from react-router without any TypeScript or linting errors, but that's what was causing the problems on our end.

Can you both check to see if you've made the same mistake? If so, I hope this solves your problems as well!

[crates]

So, once more for clarity, do NOT do this if you have any custom routes in your app:

import {
  Route,
} from 'react-router';

Instead, this is the correct approach which will hopefully fix your issues:

import {
  Route,
} from 'react-router-dom';

God, I really do hate React Router and its endless parade of syntax changes.

[MBach]

So, once more for clarity, do NOT do this if you have any custom routes in your app:

import {
  Route,
} from 'react-router';

Instead, this is the correct approach which will hopefully fix your issues:

import {
  Route,
} from 'react-router-dom';

God, I really do hate React Router and its endless parade of syntax changes.

Good asumption with custom routes, that's what I thought too. However, I do have checked my code, and I have react-router-dom only.

[cwagner22]

@MBach Did you solve it?

[MBach]

Not yet. For now I'm staying with fixed react-router-dom: 6.3.0

[qpointsystems]

Another anecdote related to this root issue that might be helpful.

Was just doing an upgrade pass on my application, going through my dependencies. As part of that process I upgraded to react-router-dom 6.6.1 from 6.4.2 and encountered the issue above. After hunting around for a possible cause, I came across this thread here in GitHub.

I played around with some trial and error, upgrading to 6.4.5, no go. 6.5.0, no go.

Hmmm. Then, I was doing some unrelated cleanup and accidentially removed the dependency entirely from my package.json. I had restarted Node in my IDE and was checking something else out and viola!! the browser page refreshed and the app did not through the error. A Christmas miracle!

To summarize my situation: I previously had "react-router-dom": "^6.x.x" explicitly added to my package.json.
Removing it entirely seems to have solved the problem.

[openforce-jp]

I had the same issue using react-router@6.4.4.
After that, changing to 6.3.0 didn't solve the problem.
I'm using pnpm and had two versions of react-router in /node_modules/.pnpm/.

Deleted the node_modules directory and deleted pnpm-lock.yaml.
I solved it by running pnpm install afterwards.

[RedRush1]

@fzaninotto

I also encountered this error. What is interesting is that it gets reproduced when react-router-dom gets new version. To reproduce it locally I delete react-router-dom and install again. After that react-admin break consistently when you click on resource. Temporal fix is to update react-router-dom to latest version, however after third time it is rather unpleasant.

[CLSnazel]

Chiming in for anyone else googling this issue...

We encountered this error while moving react-admin from one framework to a fresh Create React App. For this case, we wanted to avoid deleting yarn.lock so we didn't get any further dependency changes. Adding react-router-dom and react-router to the resolutions in package.json removed the duplicate versions:

"resolutions":{
  "react-router-dom": "6.8.0",
  "react-router": "6.8.0"
}

[ythomop]

Just encountered this error and I solved it by using react-admin: "4.7.4".
Previously, I had "^4.7.4", which installed version 4.7.6 which seems to be broken, for me at least.

[teodora-zhelyazkova]

I just had this issue and solved it by deleting node_modules and pnpm-lock.yaml & running pnpm install again

[psam44]

I confirm duplicates as the cause of the problem.
After some confused add/remove commands and manual edit of package.json, I ended up with a mess in yarn.lock.
Extracts:

react-admin@^4.16.6:
  version "4.16.6"
  dependencies:
    react-router "^6.1.0"
    react-router-dom "^6.1.0"
react-router-dom@^6.1.0:
  version "6.3.0"
  dependencies:
    history "^5.2.0"
    react-router "6.3.0"
react-router-dom@^6.21.2:
  version "6.21.2"
  dependencies:
    "@remix-run/router" "1.14.2"
    react-router "6.21.2"
react-router@6.21.2:
  version "6.21.2"
  dependencies:
    "@remix-run/router" "1.14.2"
react-router@6.3.0, react-router@^6.1.0:
  version "6.3.0"
  dependencies:
    history "^5.2.0"

After manual cleanup of yarn.lock to keep only references to 6.21.2, the server is fine again.