MUI Core doesn't work with React 18 (dependency conflict)-CodePudding

I'm looking to use import Box from '@material-ui/core/Box' material ui box in dashboar CoreUI React , so i tried to install material-ui core but i got this error:

> npm install @material-ui/core
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: @coreui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^18.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
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! See C:\Users\Asus\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Asus\AppData\Local\npm-cache\_logs\2022-09-20T13_48_18_724Z-debug-0.log

This is my actual package.json:

"dependencies": {
    "@coreui/chartjs": "^3.0.0",
    "@coreui/coreui": "^4.2.1",
    "@coreui/icons": "^2.1.0",
    "@coreui/icons-react": "^2.1.0",
    "@coreui/react": "^4.3.1",
    "@coreui/react-chartjs": "^2.1.0",
    "@coreui/utils": "^1.3.1",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@mui/icons-material": "^5.10.6",
    "@mui/material": "^5.10.6",
    "react": "^18.2.0",
    "react-app-polyfill": "^3.0.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.0.2",
    "react-router-dom": "^6.3.0",
},

Note: i already successfully installed

npm install @mui/material @emotion/react @emotion/styled

Importing import Box from '@material-ui/core/Box' lead to error:

Module not found: Error: Can't resolve '@material-ui/core/Box' in 'C:\Projects React\BPS projects\coreui-free-react-admin-template-main\src'

How to fix it?

CodePudding user response：

Maybe there's other solutions better than this, but according to this comment on a similar thread on Github, it looks like we can't use MUI styling on React 18, so i had to downgrade to React 17 and then modify index.js file from:

import 'react-app-polyfill/stable'
import 'core-js'
import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'
import reportWebVitals from './reportWebVitals'
import { Provider } from 'react-redux'
import store from './store'

createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>,
)

reportWebVitals()

import 'react-app-polyfill/stable'
import 'core-js'
import React from 'react'
import ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import App from './App'
import reportWebVitals from './reportWebVitals'
import store from './store'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root'),
)

reportWebVitals()