Error when building frontend with React 18

[Aidan199916]

Hello all, I am new to React and am attempting to build a Portfolio website with React, hosting it in Amplify. When deploying, I keep running into the same error. Listed below is my build log errors.

Executing command: npm ci
2023-05-09T14:36:45.728Z [WARNING]: npm ERR!
2023-05-09T14:36:45.729Z [WARNING]: code ERESOLVE
2023-05-09T14:36:45.730Z [WARNING]: npm
2023-05-09T14:36:45.732Z [WARNING]: ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @material-ui/[email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react-dom
npm ERR! react-dom@"^18.2.0" from the root project
npm ERR! peer react-dom@"^17.0.0 || ^18.0.0" from @mui/[email protected]
npm ERR! node_modules/@mui/base
npm ERR! @mui/base@"5.0.0-alpha.128" from @mui/[email protected]
npm ERR! node_modules/@mui/lab
npm ERR! @mui/lab@"^5.0.0-alpha.129" from the root project
npm ERR! @mui/base@"5.0.0-alpha.128" from @mui/[email protected]
npm ERR! node_modules/@mui/material
npm ERR! @mui/material@"^5.12.3" from the root project
npm ERR! 2 more (@mui/icons-material, @mui/lab)
npm ERR! 5 more (@mui/lab, @mui/material, @testing-library/react, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"^4.12.4" from the root project
npm ERR! peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/icons
npm ERR! @material-ui/icons@"^4.11.3" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/react-dom
npm ERR! peer react-dom@"^16.8.0 || ^17.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/core
npm ERR! @material-ui/core@"^4.12.4" from the root project
npm ERR! peer @material-ui/core@"^4.0.0" from @material-ui/[email protected]
npm ERR! node_modules/@material-ui/icons
npm
2023-05-09T14:36:45.732Z [WARNING]: ERR! @material-ui/icons@"^4.11.3" 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.

I have tried both --force and --legecy-peer-deps to no avail. Any help or suggestions would be very appreciated. 

[reesscot]

From the above, it looks like @material-ui/core requires react-dom 17 and below whereas @mui/base requires react-dom 17 or 18. I would try removing the old @material-ui/core dependencies and install the new ones. See: https://mui.com/material-ui/getting-started/installation/

[Aidan199916]

@reesscot I appreciate you taking the time to look into what I am working on. Are there any other methods to remove @material-ui ?

[github-actions]

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see.
If you need more assistance, please either tag a team member or open a new issue that references this one.
If you wish to keep having a conversation with other community members under this issue feel free to do so.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.