React Dependency Conflict: Material-UI (Mui) Causing Issues of Incompatibility

While trying to install react dependencies using npm i in Netlify, it appears that there are some missing or unresolved libraries in material-ui.

Could someone offer assistance in determining the correct versions?

1:48:24 PM: Failed during stage "Install dependencies": dependency_installation script returned non-zero exit code: 1
1:48:24 PM: npm ERR! code ERESOLVE
1:48:24 PM: npm ERR! ERESOLVE could not resolve
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! While resolving: @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cbb8bfb2a7aeb88bfee5fafee5fa">[email protected]</a>
1:48:24 PM: npm ERR! Found: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee9c8b8f8d9aaedfd6c0dcc0de">[email protected]</a>
1:48:24 PM: npm ERR! node_modules/react
1:48:24 PM: npm ERR!   react@"^18.2.0" from the root project
1:48:24 PM: npm ERR!   peer react@">=16.8.0" from @emotion/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4436212527300475756a75756a77">[email protected]</a>
1:48:24 PM: npm ERR!   node_modules/@emotion/react
1:48:24 PM: npm ERR!     @emotion/react@"^11.11.1" from the root project
1:48:24 PM: npm ERR!     peer @emotion/react@"^11.0.0-rc.0" from @emotion/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8bf8fff2e7eeefcbbabaa5babaa5bb">[email protected]</a>
1:48:24 PM: npm ERR!     node_modules/@emotion/styled
1:48:24 PM: npm ERR!       @emotion/styled@"^11.11.0" from the root project
1:48:24 PM: npm ERR!       3 more (@mui/material, @mui/styled-engine, @mui/system)
1:48:24 PM: npm ERR!     3 more (@mui/material, @mui/styled-engine, @mui/system)
1:48:24 PM: npm ERR!   18 more (@emotion/styled, ...)
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! Could not resolve dependency:
1:48:24 PM: npm ERR! peer react@"^17.0.0" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="285b5c51444d5b681d06191d0619">[email protected]</a>
1:48:24 PM: npm ERR! node_modules/@mui/styles
1:48:24 PM: npm ERR!   @mui/styles@"^5.15.1" from the root project
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! Conflicting peer dependency: <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="196b7c787a6d59282e3729372b">[email protected]</a>
1:48:24 PM: npm ERR! node_modules/react
1:48:24 PM: npm ERR!   peer react@"^17.0.0" from @mui/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6211161b0e071122574c53574c53">[email protected]</a>
1:48:24 PM: npm ERR!   node_modules/@mui/styles
1:48:24 PM: npm ERR!     @mui/styles@"^5.15.1" from the root project
1:48:24 PM: npm ERR!
1:48:24 PM: npm ERR! Fix the upstream dependency conflict, or retry
1:48:24 PM: npm ERR! this command with --force or --legacy-peer-deps
1:48:24 PM: npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
reactjsnode.jsnpmmaterial-ui

Answer №1

The error message is indicating that @mui/styles is not compatible with React 18. Upon reviewing the @mui/styles documentation, you will come across the following warning:

@mui/styles was deprecated when MUI Core v5 was released in late 2021. It relied on JSS as a styling solution, which is no longer utilized in @mui/material.

@mui/styles does not work with React.StrictMode or React 18, and it will not receive updates.

This documentation is maintained for those handling legacy projects, but we highly recommend against using @mui/styles for new Material UI applications—you will encounter unresolved dependency issues.

Instead, please use @mui/system.

To ensure your app works with React 18, remove the @mui/styles dependency from your package.json. Then modify any code using this dependency to utilize a different styling library, like @mui/system or @emotion/styled (which should already be in your package.json based on the error). This is also the recommended method for styling components if you are following the @mui/material installation guide.

If transitioning all at once seems daunting, consider temporarily downgrading React from version 18 to 17 in your package.json while you switch your components over to a new styling library.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am interested in incorporating the ability to select and scroll the window without needing to interact with the scroll bar by

Imagine a visitor wanting to highlight all the information on a webpage. They choose to start dragging their cursor towards the bottom of the window. How can we enable the webpage to smoothly scroll down as they do this? ...

javascriptreactjs

Utilizing FlowRouter with React: Implementing conditional component rendering based on route

I am currently working on a Meteor application using React and navigating with FlowRouter. Within my main AppContainer, I have multiple components including a footer. class AppContainer extends Component { render() { return( <di ...

reactjsflow-router

Utilize JavaScript or jQuery to segment HTML elements

Looking for a front-end solution to a common practice. In the past, I've stored reusable HTML elements (such as <nav>, <header>, <footer>, etc.) in a functions.php file and used PHP functions to include them on multiple pages. This ...

javascriptjqueryhtmlnode.js

Can anyone guide me on implementing getServerSideProps in a TypeScript NextPage component?

I've come across a page that I'd like to replicate, with the code sourced from https://github.com/dabit3/nextjs-lit-token-gating/blob/main/pages/protected.js: import Cookies from 'cookies' import LitJsSdk from 'lit-js-sdk' ex ...

reactjstypescriptnext.jsserver-side-rendering

Heroku, Express, React, and NodeJS - struggling with HTTPS inconsistency issue

I'm facing an issue with my express routes not working properly when deployed on Heroku. The odd thing is that the routes work fine when accessed via HTTP, but not via HTTPS. Interestingly, they do work on HTTPS with Internet Explorer and Microsoft Ed ...

node.jsreactjsexpressherokuhttps

Having trouble with react-testing-library and material-ui: Invalid element type error?

I encountered an issue while attempting to render a component in a react unit test, specifically with the mount method using enzyme. The error message is: Element type is invalid: expected a string (for built-in components) or a class/function (for comp ...

reactjsunit-testingmaterial-uireact-testing-library

Encountering an issue in my Node terminal program with the message "Error: Cannot find module."

Encountered an error: Last login: Thu Dec 23 12:32:55 on ttys000 juliedecraene@Julies-MBP ~ % node -- version node:internal/modules/cjs/loader:936 throw err; ^ Error: Cannot find module '/Users/juliedecraene/version' at Function.Module._ ...

node.js

Error: Attempting to access the 'body' property of an undefined object following a POST request in a MEAN application

Currently, I am attempting to send POST data from AngularJS to Express. My approach involves using curl to transmit the POST content. After sending the data and receiving a 200 response, I encounter an issue when trying to access the data through body-par ...

javascriptnode.jsexpress

I am unable to access the state after setting it in useEffect in React. Why is this happening?

After rendering the component, I utilize socket io to send a socket emit in order to fetch data within the useEffect hook. Subsequently, I also listen for the data that is returned. However, upon receiving the data back from the socket, I update the stat ...

javascriptreactjsreact-hooks

Effective Ways to Redirect During or After Executing the onClick Function of Button

I am currently working on implementing a feature for my Next.js website. The functionality involves allowing users to create a new group by clicking a button, and then being redirected to an "Invite members" page with the auto-generated group_id included i ...

javascripthtmlreactjshttp-redirectnext.js

Guide on transferring a Git repository to the main branch of a different repository

After completing the development of my template engine, Squirrelly, I have the current version saved in a GitHub repository at https://github.com/squirrellyjs/squirrelly, and the new version can be found at https://github.com/squirrellyjs/squirrelly-next. ...

gitgithubnpm

React component failing to re-render when the component state is updated

Currently, I am focusing on developing a sidebar that utilizes a recursive function to populate a nested list of navigation elements. In terms of functionality, everything appears to be working correctly except for the re-rendering when clicking on one of ...

reactjs

Easy steps for importing node modules in TypeScript

I'm currently navigating the world of TypeScript and attempting to incorporate a module that is imported from a node module. I have chosen not to utilize webpack or any other build tools in order to maintain simplicity and clarity. Here is the struct ...

javascriptnode.jstypescriptnpmes6-modules

What is the specific file where you can insert code that will apply to every page within the app directory of Next.js?

Where is the main global file to use useEffect for all pages? Previously in Next.js, you could utilize useEffect in _app.tsx, impacting all pages. Take a look at this example: const MyApp = ({ Component, pageProps }: AppProps) => { useEffect(() => ...

reactjsnext.js

What is the best way to transfer data from the backend (express) to the frontend (react) within a single application?

I am working on a project that consists of an express app with React JS for the view. I have implemented client-side routing using react-router, and now there is a requirement to fetch remote configuration data. This data will be used to determine whether ...

node.jsreactjsexpress

Is there a way to efficiently clear the Express session for all users without the need to restart the application?

During my development of REST services using the nodejs express framework, I encountered an issue with storing user-specific data in sessions. I utilized the user's ID as a key to identify the user's data. The following code snippet demonstrates ...

javascriptnode.jssessionexpressstorage

What are some techniques for testing masked input fields?

Looking for guidance on unit testing a masked input field in React using react-testing-library? The component is built with Material UI and React Hook Form. I've included some code and examples to help you out. Thank you in advance! Test file: let ...

reactjsjestjsmaterial-uireact-testing-libraryreact-hook-form

Performing row-specific actions with React Material-Table based on row data

I am looking to enable row actions only for specific rows that meet certain property values. For instance, if a row has the isDeletable property set to true, I would like to display a delete icon in the actions column for that row. Your help is greatly ap ...

reactjsmaterial-uimaterial-table

How can we insert data at the bottom of a table to begin with?

I am looking to add information retrieved from the iTunes API to the end of a table. The first album I receive will be placed at the very end, with each subsequent album adding on while pushing the previous one up in the hierarchy. Any ideas on how I can ...

javascriptreactjsalgorithmdatatable

Using Node.js and the Azure DevOps Node API, you can easily retrieve attachments from Azure DevOps work items

Encountering a problem while attempting to download an attachment for a work item in Azure DevOps. Utilizing the node.js 'azure-devops-node-api' client (https://www.npmjs.com/package/azure-devops-node-api) to communicate with ADO API. Retrieving ...

javascriptnode.jsazure-devops-rest-api