npmnext.jsmaterial-uinpm-install

Problem in installing mui in nextjs project with app router and typescript

I Have created a next js project with app router, without src, with typescript. For design purpose I was trying to install mui by npm install @mui/material @emotion/react @emotion/styled command. But It is throwing npm error. For dependencies in package.json it is showing: "dependencies": { "next": "15.0.3", "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106" }. I have created the project using command: npx create-next-app

The npm error is:

npm install @mui/material @emotion/react @emotion/styled
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: new-project@0.1.0
npm error Found: react@19.0.0-rc-66855b96-20241106
npm error node_modules/react
npm error   react@"19.0.0-rc-66855b96-20241106" 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/material@6.1.8
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.

If I am using --force for the installation, then also so many warnings are showing. What is the reason behind it? I want to know the solution as well.

Solution

  • You have version 19.0.0-rc of React. First you need to downgrade react version to 18. Follow the steps:

    npm uninstall react react-dom

    then you need to install version 18.x.x of React (I prefer 18.2.0)

    npm install react@18.2.0 react-dom@18.2.0