Cannot install React RC with Material UI #44203

mj-manna · 2024-10-24T11:07:39Z

Steps to reproduce

npm install @mui/material @emotion/react @emotion/styled
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/material
npm ERR! @mui/material@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! For a full report see:
npm ERR! /home/user/.npm/_logs/2024-10-24T11_03_10_171Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: /home/user/.npm/_logs/2024-10-24T11_03_10_171Z-debug-0.log

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Nextjs

Search keywords:

The text was updated successfully, but these errors were encountered:

LukasTy · 2024-10-24T11:33:41Z

Hello.
Are you sure the problem is related to Next 15?
To me, it seems that you are trying to install @mui/material v6 with a pre-release version react of which your package manager complains:

npm ERR! ERESOLVE unable to resolve dependency tree
...
npm ERR! react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/[email protected]

Using React v18.x should avoid this problem. 🤔

I'm transferring the issue to the material-ui repo as it is base of the problem.

mj12albert · 2024-10-24T14:27:32Z

@mj-manna Would you mind sharing a repro?

beverloo · 2024-10-24T18:18:18Z

One issue is that the @mui/material-nextjs package requires Next.js 13 or 14 as a peer dependency, not 15:
https://github.com/mui/material-ui/blob/master/packages/mui-material-nextjs/package.json

NebulaRobot · 2024-10-25T02:47:55Z

Exactly the same problem.

npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-65a56d0e-20241020" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^17.0.0 || ^18.0.0 || ^19.0.0" from @mui/[email protected]
npm error node_modules/@mui/material
npm error   @mui/material@"*" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

siriwatknp · 2024-10-25T03:57:22Z

I am fixing this.

github-actions · 2024-10-25T04:41:27Z

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@mj-manna How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

siriwatknp · 2024-10-25T04:48:01Z

This is fixed from our side but the error is still shown with Emotion because the current Next.js uses React release candidate version which is not working with Emotion's peerDependency `">=16.8.0"

Ref: npm/cli#4958

The workaround is to run npm install --legacy-peer-deps

macedomauriz · 2024-10-27T01:37:33Z

I am having issues updating @mui/material-nextjs only having updated to Next 15, not React 19 RC:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"15.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^13.0.0 || ^14.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/material-nextjs
npm ERR!   @mui/material-nextjs@"6.1.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

tomashlavac · 2024-10-27T20:18:05Z

I am having issues updating @mui/material-nextjs only having updated to Next 15, not React 19 RC:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/next
npm ERR!   next@"15.0.1" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next@"^13.0.0 || ^14.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/material-nextjs
npm ERR!   @mui/material-nextjs@"6.1.5" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

@macedomauriz Hi, after 2 days I managed to fix it. Try to add this section to package.json and replace react and nextjs version with yours

"overrides": {
  "react": "^19.0.0-rc-fb9a90fa48-20240614",
  "react-dom": "^19.0.0-rc-fb9a90fa48-20240614",
  "@emotion/react": {
    "react": "^19.0.0-rc-fb9a90fa48-20240614"
  },
  "@mui/material-nextjs": {
    "next": "^15.0.1"
  }
}

AlbinoGeek · 2024-10-30T20:49:31Z

I've found that while you can install Material-UI on NextJS 15 (even without React 19) -- it just doesn't work, none of the hydration works, you get random client-side errors, and the theme palette mode won't go dark (?) Assume emotion incompatability.

Tried both NextJS 15 w/ React 18 and NextJS 16 w/ React 19.

siriwatknp · 2024-10-31T00:57:33Z

I've found that while you can install Material-UI on NextJS 15 (even without React 19) -- it just doesn't work, none of the hydration works, you get random client-side errors, and the theme palette mode won't go dark (?) Assume emotion incompatability.

Tried both NextJS 15 w/ React 18 and NextJS 16 w/ React 19.

Please provide a repo that we can take a look at.

AlbinoGeek · 2024-11-02T07:02:50Z

Please provide a repo that we can take a look at.

Sadly not possible. We dropped NextJS on all projects that we were allowed to. Remaining projects are private or under contract. However, my understanding is the process/result should be nearly identical for anyone else, even on a fresh project. After listing reproduction and trying again, I've found the issue is either React19 or TurboPack. If we reject both, the upgrade works.

I've attached following the steps (at least, what I can) for you to see. First I have the working NextJS14 / MaterialUI6 project below. For troubleshooting, we've done a fresh install, a fresh build, and triple-checked out dependency versions before beginning the upgrade.

Check our package versions before the upgrade

$ rm -rf node_modules/ && echo $? # 0 (Success)
$ yarn install   2>&1  && echo $? # 0 (Success)
$ yarn run build 2>&1  && echo $? # 0 (Success)

# Check our package versions pre-upgrade (known working state)
$ cat package.json | jq .dependencies | grep "@mui\|next\|emotion\|react"
  "@emotion/cache": "^11.13.1",
  "@emotion/react": "^11.13.3",
  "@emotion/server": "^11.11.0",
  "@emotion/styled": "^11.13.0",
  "@mui/icons-material": "^6.1.6",
  "@mui/material": "^6.1.6",
  "@mui/material-nextjs": "^6.1.6",
  "@mui/system": "^6.1.6",
  "@mui/x-charts": "^7.22.1",
  "next": "^14.2.16",
  "react": "^18.3.1",
  "react-dom": "^18.3.1",

$ cat package.json | jq .devDependencies | grep "react\|eslint"
  "@eslint/js": "^8.57.1",
  "@next/eslint-plugin-next": "^14.2.16",
  "@types/eslint__js": "^8.42.3",
  "@types/react": "^18.3.12",
  "@types/react-dom": "^18.3.1",
  "@typescript-eslint/eslint-plugin": "^8.12.2",
  "@typescript-eslint/parser": "^8.12.2",
  "eslint": "^8.57.1",
  "eslint-config-next": "^14.2.16",
  "eslint-plugin-import": "^2.31.0",
  "eslint-plugin-mui-path-imports": "^0.0.15",
  "eslint-plugin-react": "^7.37.2",
  "eslint-plugin-react-hooks": "^5.0.0",
  "typescript-eslint": "^8.12.2"

Setup a Fresh MaterialUI Project

First, setup a fresh MUI project:

Install NextJS 14 / MaterialUI 6 / Typescript / ESLint@8
Use the Pages Router
Follow the MaterialUI NextJS Integration Guide
Set your theme's colour mode to dark -- See it work

Upgrade the Project using the supplied commands

Use the codemod command to upgrade the project to Next15
Reject the React19 upgrade, opting to stay on React18
Allow the other codemods to run (except skip the app router one)

I've found 50% of the time these fail randomly (EPERM on file delete) if that happens, just do it again.

Site is now rendered white (and broken), with CSS and JS errors throughout.

The materialui-nextjs bridge only has Next14 imports, methinks blame that?

Alright, now it's time to attempt the upgrade...

First, we realize there are only instructions for App Router, so we follow those: https://nextjs.org/docs/app/building-your-application/upgrading/version-15

$ npx @next/codemod@canary upgrade latest
Need to install the following packages:
@next/[email protected]
Ok to proceed? (y) y

  Detected installed versions:
  - React: v18.3.1
  - Next.js: v14.2.16
√ Do you prefer to stay on React 18? ... yes
√ Enable Turbopack for next dev? ... no
? The following codemods are recommended for your upgrade. Select the ones to apply. »
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    a: Toggle all
    enter/return: Complete answer
( )   (v15.0.0-canary.179) app-dir-runtime-config-experimental-edge
(*)   (v15.0.0-canary.171) next-async-request-api
(*)   (v15.0.0-canary.153) next-request-geo-ip
Upgrading your project to Next.js 15.0.2..
➤ YN0000: · Yarn 4.5.1
➤ YN0000: ┌ Resolution step
➤ YN0085: │ + @next/eslint-plugin-next@npm:15.0.2, eslint-config-next@npm:15.0.2, next@npm:15.0.2, and 12 more.
➤ YN0085: │ - @next/env@npm:14.2.16, @next/eslint-plugin-next@npm:14.2.16, @next/swc-darwin-arm64@npm:14.2.16, and 15 more.      
➤ YN0000: └ Completed in 0s 564ms     
➤ YN0000: ┌ Post-resolution validation
➤ YN0086: │ Some peer dependencies are incorrectly met by dependencies; run yarn explain peer-requirements for details.
➤ YN0000: └ Completed
➤ YN0000: ┌ Fetch step
➤ YN0013: │ 5 packages were added to the project (+ 290.97 MiB).
➤ YN0000: └ Completed in 3s 175ms
➤ YN0000: ┌ Link step
➤ YN0000: └ Completed in 3s 410ms
➤ YN0000: · Done with warnings in 7s 210ms
WARNING: Git directory is not clean. Forcibly continuing.
Executing command: jscodeshift --no-babel --ignore-pattern=**/node_modules/** --ignore-pattern=**/.next/** --extensions=tsx,ts,jsx,js --transform C:\[redacted]\node_modules\@next\codemod\transforms\next-async-request-api.js S:\Projects\com.github\[redacted]
Processing 62 files... 
Spawning 31 workers...
Sending 2 files to free worker...
[... last line repeated ...]
All done. 
Results: 
0 errors
62 unmodified
0 skipped
0 ok
Time elapsed: 0.871seconds
WARNING: Git directory is not clean. Forcibly continuing.
√ Is your app deployed to Vercel? (Required to apply the selected codemod) ... no
Skipping codemod "next-request-geo-ip" as your app is not deployed to Vercel.

✔ Codemods have been applied successfully.

Please review the local changes and read the Next.js 15 migration guide to complete the migration.
https://nextjs.org/docs/canary/app/building-your-application/upgrading/version-15

Then, verify the upgrade

Now we verify that the upgrade completed, by checking package versions and building.

$ yarn install   2>&1  && echo $? # 0 (Success)
$ yarn run build 2>&1  && echo $? # 0 (Success)

$ cat package.json | jq .dependencies | grep "@mui\|next\|emotion\|react"
  "@emotion/cache": "^11.13.1",
  "@emotion/react": "^11.13.3",
  "@emotion/server": "^11.11.0",
  "@emotion/styled": "^11.13.0",
  "@mui/icons-material": "^6.1.6",
  "@mui/material": "^6.1.6",
  "@mui/material-nextjs": "^6.1.6",
  "@mui/system": "^6.1.6",
  "@mui/x-charts": "^7.22.1",
  "next": "15.0.2",
  "react": "18.3.1",
  "react-dom": "18.3.1",

$ cat package.json | jq .devDependencies | grep "react\|eslint"
  "@eslint/js": "^8.57.1",
  "@next/eslint-plugin-next": "15.0.2",
  "@types/eslint__js": "^8.42.3",
  "@types/react": "18.3.12",
  "@types/react-dom": "18.3.1",
  "@typescript-eslint/eslint-plugin": "^8.12.2",
  "@typescript-eslint/parser": "^8.12.2",
  "eslint": "^8.57.1",
  "eslint-config-next": "15.0.2",
  "eslint-plugin-import": "^2.31.0",
  "eslint-plugin-mui-path-imports": "^0.0.15",
  "eslint-plugin-react": "^7.37.2",
  "eslint-plugin-react-hooks": "^5.0.0",
  "typescript-eslint": "^8.12.2"

Test the result worked

Alright, all good so far, now let's test that the site works:

$ yarn run dev
   ▲ Next.js 15.0.2
   - Local:        http://localhost:9250
   - Environments: .env

 ✓ Starting...
 ✓ Ready in 1513ms
 ○ Compiling / ...
 ✓ Compiled / in 3.2s (1221 modules)
 GET / 200 in 3632ms

Success.

macedomauriz · 2024-11-02T07:06:01Z

how about npm?

mj-manna added bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 24, 2024

LukasTy transferred this issue from mui/mui-x Oct 24, 2024

mj12albert added status: waiting for author Issue with insufficient information nextjs and removed bug 🐛 Something doesn't work status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Oct 24, 2024

mj12albert changed the title ~~Nextjs 15 not supported~~ @mui/material-nextjs does not support Next.js 15 as peer dep Oct 25, 2024

mj12albert removed the status: waiting for author Issue with insufficient information label Oct 25, 2024

siriwatknp added this to Material UI Oct 25, 2024

siriwatknp moved this to Selected in Material UI Oct 25, 2024

siriwatknp mentioned this issue Oct 25, 2024

Support Next 15.0.0 in @mui/material-nextjs #42428

Merged

1 task

siriwatknp closed this as completed in #42428 Oct 25, 2024

github-project-automation bot moved this from Selected to Done in Material UI Oct 25, 2024

siriwatknp reopened this Oct 25, 2024

siriwatknp added the external dependency Blocked by external dependency, we can’t do anything about it label Oct 25, 2024

siriwatknp moved this from Done to Stalled in Material UI Oct 25, 2024

siriwatknp changed the title ~~@mui/material-nextjs does not support Next.js 15 as peer dep~~ Cannot install React RC with Material UI Oct 25, 2024

This was referenced Oct 28, 2024

Installation failed with pnpm nextjs 15.0.1 official for mui6 #44238

Closed

@mui/material-nextjs has failed installing on 15.0.1 #44255

Closed

[any component] Module not found: Can't resolve '@emotion/styled #44241

Closed

This was referenced Oct 30, 2024

Hydration Error in NEXTJS 15.0.2 #44263

Closed

Need to support for v15-appRouter for NextJS 15, only the import of @mui/material-nextjs/v14-appRouter and earlier are present #44270

Closed

mj12albert mentioned this issue Oct 31, 2024

mui icon flashing on page load with next js #44259

Closed

jdp1ps mentioned this issue Nov 14, 2024

update readme for PostgreSQL v15 and dependencies installation CRISalid-esr/SoVisuPlus#54

Merged

DiegoAndai self-assigned this Nov 18, 2024

DiegoAndai moved this from Stalled to Selected in Material UI Nov 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cannot install React RC with Material UI #44203

Cannot install React RC with Material UI #44203

mj-manna commented Oct 24, 2024 •

edited by github-actions bot

Loading

LukasTy commented Oct 24, 2024

mj12albert commented Oct 24, 2024

beverloo commented Oct 24, 2024

NebulaRobot commented Oct 25, 2024

siriwatknp commented Oct 25, 2024

github-actions bot commented Oct 25, 2024

siriwatknp commented Oct 25, 2024

macedomauriz commented Oct 27, 2024

tomashlavac commented Oct 27, 2024 •

edited

Loading

AlbinoGeek commented Oct 30, 2024

siriwatknp commented Oct 31, 2024

AlbinoGeek commented Nov 2, 2024

macedomauriz commented Nov 2, 2024

Cannot install React RC with Material UI #44203

Cannot install React RC with Material UI #44203

Comments

mj-manna commented Oct 24, 2024 • edited by github-actions bot Loading

Steps to reproduce

Current behavior

Expected behavior

Context

Your environment

LukasTy commented Oct 24, 2024

mj12albert commented Oct 24, 2024

beverloo commented Oct 24, 2024

NebulaRobot commented Oct 25, 2024

siriwatknp commented Oct 25, 2024

github-actions bot commented Oct 25, 2024

siriwatknp commented Oct 25, 2024

macedomauriz commented Oct 27, 2024

tomashlavac commented Oct 27, 2024 • edited Loading

AlbinoGeek commented Oct 30, 2024

siriwatknp commented Oct 31, 2024

AlbinoGeek commented Nov 2, 2024

macedomauriz commented Nov 2, 2024

mj-manna commented Oct 24, 2024 •

edited by github-actions bot

Loading

tomashlavac commented Oct 27, 2024 •

edited

Loading