material-ui: create-react-app-with-styled-components fails with Can't resolve '@emotion/react'

It works after installing @emotion/styled AND @emotion/react which defeats the purpose of having the style engines disconnected and pluggable (as per the documenation)

for those getting error try this npm install @mui/material @emotion/react @emotion/styled

I am getting this warning in Vercel:

warning Pattern ["@mui/styled-engine@npm:@mui/styled-engine-sc@latest","@mui/styled-engine@^5.1.1"] is trying to unpack in the same destination "/vercel/.cache/yarn/v6/npm-@mui-styled-engine-5.1.0-672fcc97192a7286cf306c92e71bad84eb0885a1-integrity/node_modules/@mui/styled-engine" as pattern ["@mui/styled-engine@npm:@mui/styled-engine-sc@latest"]. This could result in non-deterministic behavior, skipping.

Could this be related? I am seeing Module not found: Can't resolve '@mui/styled-engine' after following all steps outlined in docs, but only when deploying to Vercel. Works fine locally.

I’m facing this issue also with yarn… After initially installing with npm, I deleted my node_modules and package-lock.json and installed everything with yarn. Still got that can’t resolve module error. Installed @emotion/react and @emotion/styled and now it’s working. But as mentioned, having both styled-components (which I want to use) and emotion just defeats the purpose…

Any updates on this will be greatly appreciated 🙏

Still encountering this issue as of today (npm 8.19.3).

    "@mui/material": "^5.11.5",
    "@mui/styled-engine-sc": "^5.11.0",
    "styled-components": "^5.3.6",

I was able to get past the issue by following the @mui/styled-engine guide, and installing @emotion/react and @emotion/styled.

The MUI Installation docs might need to be updated to reflect that this is necessary. The current docs imply that you need to do EITHER:

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

OR

npm install @mui/material @mui/styled-engine-sc styled-components

…when the actual solution is:

npm install @mui/material @mui/styled-engine-sc @emotion/react @emotion/styled styled-components

This still happens, even after installing the package

I ran into this behavior with the 5.0 release, trying to use CRA, npm, and styled-components. Installing @emotion/styled and @emotion/react does fix it, as per https://github.com/mui-org/material-ui/issues/27846#issuecomment-902448679.

What’s the current state of this? It sounds like the options are either:

1. Use yarn
2. Install the @emotion packages, even when using styled-components with a proper fix for npm waiting on npm’s support for overrides. Is that an accurate summary?

In case this helps anyone else - I had this issue with yarn workspaces. The issue was twofold:

1. If you are using workspaces, the resolutions section must go in the workspace’s root package.json.
2. Since you’ve already aliased @mui/styled-engine to @mui/styled-engine-sc in the resolutions, you cannot also alias it through craco or tsconfig paths.

If you inspect <project root>/node_modules/@mui/styled-engine/package.json you will notice it is @mui/styled-engine-sc; this is how you know the resolution is working.

Same here but with Gatsby. Ofc I tried style guide, adding custom webpack configuration , resolutions in package.json and nothing helps.

Problem happens with yarn

ModuleNotFoundError: Module not found: Error: Can't resolve '@mui/styled-engine' in 'path/to/project/node_modules/@mu
  i/system/esm'

I got the same issue as @OPerel, I’m using yarn, I’d like to use styled-components, but now it’s only working when I installed @emotion/react and @emotion/styled with styled-components, this is not ideal. I followed this document: https://mui.com/guides/styled-engine/

Same here, but when i build a docker image

warning Pattern ["@mui/styled-engine-sc@^5.3.0"] is trying to unpack in the same destination
"/usr/local/share/.cache/yarn/v6/npm-@mui-styled-engine-5.3.0-4e63e1d2b1a74ea5b422f8b1e12140d8f9356ce9-integrity/node_modules/@mui/styled-engine"
as pattern ["@mui/styled-engine@npm:@mui/styled-engine-sc@latest","@mui/styled-engine@^5.3.0"]. This could result in non-deterministic
behavior, skipping.

And

Module not found: Can't resolve '@mui/styled-engine' in '/app/node_modules/@mui/system/esm'

I am migrating v4 to v5 and got same error with styled components. It didn’t work for me by following the change in https://mui.com/guides/styled-engine/.

After checked the repo in https://github.com/mui-org/material-ui/tree/next/examples/create-react-app-with-styled-components, I tried to add the following alias into my webpack config file and it works:

 module.exports = {
 	resolve: {
 		...,
 		alias: {
 			...,
 			'@mui/styled-engine': path.resolve(__dirname, './node_modules/@mui/styled-engine-sc')
 		}
 	}
}

Thanks for the report. I can reproduce that it does not work with npm.

I tried and it works with yarn. I believe it’s related to the package alias we use, namely because of the changes done in https://github.com/mui-org/material-ui/pull/27591.

Based on https://github.com/mui-org/material-ui/pull/27088#issuecomment-885278495 I remember that @oliviertassinari tested that it works with npm. Olivier can you verify that it works and maybe share which version of npm you are using?

I understand what’s your issue. And I already started working on this.