react-admin not rendered with next.js 13 (AwaitRenderStatus is not defined)

[somebodyawesome-dev]

What you were expecting:
Rendering of react-admin components

What happened instead:
A blank page and a silent exception occur when attempting to run the app in production mode (npm run build then npm run start), but running the code in dev mode (npm run dev) works perfectly. After trying to debug the silent error, I concluded that it might be related to the fact that react-admin relies on react-router (based on this trace ReferenceError: AwaitRenderStatus is not defined ).
here is screenshot of exception trace:

Steps to reproduce:

git clone https://github.com/somebodyawesome-dev/react_admin_bug_report.git .
npm install
npm run build 
npm run start

Other information:
The example given above shows a basic snippet from the official documentation to replicate the bug, with a small change to log the silent exception when loading the component on the client side. I also tried with next.js 14 and couldn't reproduce the same issue.

After spending several hours debugging, I discovered a workaround to make react-admin display on the screen. My solution involves specifying or overriding the version of react-router used by react-admin, by adding this snippet to the package.json file.

// for npm users
"overrides": {
    "react-admin": {
      "react-router": "6.8.1",
      "react-router-dom": "6.8.1"
    }
  },
// for yarn users
  "resolutions": {
    "react-admin": {
      "react-router": "6.8.1",
      "react-router-dom": "6.8.1"
    }
  }

Environment

• React-admin version: ^4.16.15 i tried also with older versions and found same problem
• React version: 18.2.0

[fzaninotto]

Thanks for posting the workaround.

if I understand correctly, this seems to be caused by a combination of a certain version of Next.js (not the latest one) and a certain version of react-router (I don't know which one). Therefore I'm not sure there is anything that react-admin can do.

Or am I missing something?

[somebodyawesome-dev]

@fzaninotto thank you for your reply
my best guess it got something with next 13 bundler, however here's the dependcies' list of the installed react-admin:

// npm view react-admin  dependencies --json=true
{
  "@emotion/react": "^11.4.1",
  "@emotion/styled": "^11.3.0",
  "@mui/icons-material": "^5.0.1",
  "@mui/material": "^5.0.2",
  "history": "^5.1.0",
  "ra-core": "^4.16.17",
  "ra-i18n-polyglot": "^4.16.17",
  "ra-language-english": "^4.16.17",
  "ra-ui-materialui": "^4.16.17",
  "react-hook-form": "^7.43.9",
  "react-router": "^6.1.0",
  "react-router-dom": "^6.1.0"
}

is it possible to pump up react-router version somehow or execlude the versions that does have problems from react-admin deps ? well anyhow at least here is the workaround that i used for future reference for anyone encountering same problem.

[slax57]

I have cloned your project, and edited the dependencies to use the latest versions (i.e. added ^) like so:

  "dependencies": {
    "@types/node": "18.15.3",
    "@types/react": "^18.0.28",
    "@types/react-dom": "18.0.11",
    "next": "^13.2.4",
    "ra-data-json-server": "^4.16.15",
    "react": "^18.2.0",
    "react-admin": "^4.16.15",
    "react-dom": "^18.2.0",
    "typescript": "^5.4.5"
  }

Ran npm install && npm run build && npm run start and everything worked just fine.

To me there is no issue on the RA side, so I'll close this issue.

The workaround you provided will probably still be useful to others having this issue if it ever happens.