create-react-app-with-styled-components fails with Can't resolve '@emotion/react' #27846

fondberg · 2021-08-19T13:49:50Z

The styled-components example fails with not finding emotion

The issue is present in the latest release.
I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Module not found: Can't resolve '@emotion/react' in '/path/to/create-react-app-with-styled-components/node_modules/@material-ui/system/node_modules/@material-ui/styled-engine'

Expected Behavior 🤔

Steps to Reproduce 🕹

Follow the example:

curl https://codeload.github.com/mui-org/material-ui/tar.gz/next | tar -xz --strip=2 material-ui-next/examples/create-react-app-with-styled-components
cd create-react-app-with-styled-components
npm install
npm start

Context 🔦

Your Environment 🌎

`15:50 $ npx @material-ui/envinfo npx: installed 2 in 4.683s

System:
OS: macOS 11.4
Binaries:
Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
Yarn: Not Found
npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
Browsers:
Chrome: Not Found
Edge: 92.0.902.62
Firefox: 90.0.2
Safari: 14.1.1
npmPackages:
@material-ui/core: next => 5.0.0-beta.4
@material-ui/lab: next => 5.0.0-alpha.43
@material-ui/private-theming: 5.0.0-beta.4
@material-ui/system: 5.0.0-beta.4
@material-ui/types: 6.0.2
@material-ui/unstyled: 5.0.0-alpha.43
@material-ui/utils: 5.0.0-beta.4
@types/react: 17.0.19
react: latest => 17.0.2
react-dom: latest => 17.0.2
styled-components: latest => 5.3.0`

  Don't forget to mention which browser you used.
  Output from `npx @material-ui/envinfo` goes here.

The text was updated successfully, but these errors were encountered:

fondberg · 2021-08-19T14:00:43Z

Also tried create-react-app-with-styled-components-typescript with the same result

anshul2807 · 2021-08-20T04:39:53Z

Also tried create-react-app-with-styled-components-typescript with the same result

I'm going to work on this Issue.. Can you explain me in brief.

anshul2807 · 2021-08-20T04:47:28Z

npm install @emotion/react
Try using this.

fondberg · 2021-08-20T05:49:15Z

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)

anshul2807 · 2021-08-20T05:58:01Z

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

mnajdova · 2021-08-20T09:19:45Z

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 #27591.

Based on #27088 (comment) 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?

fondberg · 2021-08-21T13:56:08Z

~~I retested with npm@7.1 and it works. But with LTS versions node v14.17.5 (npm v6.14.14) it doesn't~~
Sorry my wrong. Hadn't removed the emotion deps. Still doesn't work with npm. Yarn works though

oliviertassinari · 2021-08-21T18:24:22Z

I have noticed two issues with CRA+npm:

styled-engine-sc doesn't get installed when using the release tag, need to change it:

-"@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
+"@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@^5.0.0-beta.0",

@material-ui/system's @material-ui/styled-engine dependency is not aliased, we need Epic: Overrides Support npm/statusboard#343 to be implemented.

I would propose we revert #27591 and keep this one open to leverage the "overrides" feature of npm once available. For Next.js I believe we are good. Alternatives:

a. warn about npm and ask to use yarn in the demo
b. make @material-ui/styled-engine a peer dependency

mnajdova · 2021-08-22T18:23:10Z

Thanks @oliviertassinari
Seems emotion is still required though for me even if I want to use styled-components. Should the doc change to reflect this?

Emotion should not be required. You can use yarn if you want to follow the current template.

I would propose we revert #27591 and keep this one open to leverage the "overrides" feature of npm once available.

Agree, will do it tomorrow

mnajdova · 2021-08-23T09:39:02Z

For Next.js I believe we are good.

This doesn't work with npm as well :( Need to revert those changes as well

DylanSp · 2021-09-18T20:44:19Z

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 #27846 (comment).

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

Use yarn
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?

binxiaosyd · 2021-09-24T16:22:28Z

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')
 		}
 	}
}

mnajdova · 2021-09-28T08:44:44Z

@DylanSp @binxiaosyd we try to keep https://github.com/mui-org/material-ui/tree/HEAD/examples/create-react-app-with-styled-components up to date regarding the integrating with styled-components.

You need to add:

webpack alias - https://github.com/mui-org/material-ui/blob/master/examples/create-react-app-with-styled-components-typescript/config-overrides.js#L5
TypeScript path (if you are using TypeScript) - https://github.com/mui-org/material-ui/blob/master/examples/create-react-app-with-styled-components-typescript/tsconfig.json#L18

It would have been much more easier if npm supported package aliases, but for now, this is the recommended setup.

OPerel · 2021-10-31T15:36:11Z

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 🙏

Macy-ma · 2021-10-31T22:32:33Z

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/

karan316 · 2021-11-13T11:48:21Z

The style guide instructions still don't work. Did anyone find the fix?

AdiGutner · 2021-11-13T16:31:48Z

Having the same issue
Trying to upgrade MUI from v4 to v5 with styled-components as the styling engine.
Using NextJS and tried configuring the alias in next.config.js:

withTM({
	webpack: config => {
		config.resolve.alias = {
			...config.resolve.alias,
			"@mui/styled-engine": "@mui/styled-engine-sc",
		};
		return config;
	},
})

Looking for a fix

mnajdova · 2021-11-13T17:00:29Z

Did you try the examples https://github.com/mui-org/material-ui/tree/master/examples
Are those failing?

daveteu · 2021-11-16T11:42:26Z

I was upgrading from v5-beta and encountered same issues where @emotion is required. After several attempts, I deleted package-lock.json, and reinstall all packages from scratched and it worked.

karan316 · 2021-11-17T07:30:36Z

What fixed for me is I installed @emotion/react and made the changes mentioned in the style guide. I ran the app (using yarn dev on Next.js). After that I removed @emotion/react from dependencies and I was able to run with just styled-components.

wadehammes · 2021-11-18T18:01:57Z

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.

rroslaniec · 2021-11-26T21:30:45Z

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'

Luksys5 · 2021-11-30T15:17:56Z

For me it was the issue that webpack was in subfolder of main project
So I had to do this path.resolve(__dirname, '../node_modules/...') to work

stoplion · 2022-01-24T20:48:16Z

This still happens, even after installing the package

diguini · 2022-02-04T22:02:12Z

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'

eebbann · 2022-02-22T21:02:30Z

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

jungjay-cb · 2022-03-02T09:27:50Z

@react/emotion is still required for mui? I want to be able to manage themes only with styled-component.
sometimes i feel @react/emotion is unnecessary on my react app.

This is the main reason I can't adopt mui when I starting many projects.

mnajdova · 2022-03-07T10:40:06Z

Be aware that there are known issues using nextjs + styled-components + @mui/styled-engine-sc, because of the way of how the babel plugin for styled components work:

[styled-engine-sc] MUI + styled-components + Next.js CSS rules ordering issue #29742
Next.js + Material UI v5 styled-component example is still showing className mismatch error #27512

I would strongly recommend using the default styling engine with emotion.

Leshe4ka · 2022-03-19T17:14:28Z

I have noticed two issues with CRA+npm:

styled-engine-sc doesn't get installed when using the release tag, need to change it:
-"@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@next",
+"@material-ui/styled-engine": "npm:@material-ui/styled-engine-sc@^5.0.0-beta.0",
@material-ui/system's @material-ui/styled-engine dependency is not aliased, we need Epic: Overrides Support npm/statusboard#343 to be implemented.

I would propose we revert #27591 and keep this one open to leverage the "overrides" feature of npm once available. For Next.js I believe we are good. Alternatives:

a. warn about npm and ask to use yarn in the demo b. make @material-ui/styled-engine a peer dependency

Overrides support released in npm v8.3.0. Does it solve the problem now?

tetchel · 2022-04-05T17:53:13Z

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

If you are using workspaces, the resolutions section must go in the workspace's root package.json.
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.

Donhv · 2022-06-23T13:19:55Z

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.

did you fix this issue? i have same when deploying to Jenkin

Donhv · 2022-06-23T13:20:24Z

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'

did you fix this issue? i have same when deploying to Jenkin

aimad-majdou · 2022-11-10T13:57:44Z

For me, I'm using npm, rollup and typescript, and I followed this guide: https://mui.com/material-ui/guides/styled-engine/
And then I updated my configs as following:

tsconfig.json

"paths": { "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"] }

rollup.config.js

plugins: [ alias({ '@mui/styled-engine': '@mui/styled-engine-sc', }), ],

But I still get this error:

ERROR in ./node_modules/@mui/styled-engine/index.js Module not found: Error: Can't resolve '@emotion/react' in 'C:\projects\ui\node_modules\@mui\styled-engine'

dtrenz · 2023-01-18T21:34:11Z

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

DeividVeloso · 2023-03-14T20:09:20Z

I don't know why people closed this issue, but it still happens.

I used these instructions: https://mui.com/material-ui/getting-started/installation/ to use MUI with Styled-Components.

But my project is failing asking to install '@emotion/react' and '@emotion/styled' for me it does not make sense, since I don't want to use emotion, I just want to use the good and old styled-components.

My package.json:

{
...
  "dependencies": {
    "@mui/icons-material": "^5.11.11",
    "@mui/material": "^5.11.13",
    "@mui/styled-engine-sc": "^5.11.11",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.16",
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^5.3.9",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

```

DeividVeloso · 2023-03-14T20:14:17Z

I tried this "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest", and it did not work.

DeividVeloso · 2023-03-14T20:18:59Z

The only way that I could find to "fix" was by installing the emotion dependency that does not make sense.

Please if you fix this let me know.

Thank you so much for the great work

tonymckendry · 2023-03-16T15:34:45Z

Bump - ran into this today when following this MUI guide: https://mui.com/x/react-date-pickers/getting-started/ - really don't want to install or use Emotion as I'm already using Styled Components in my project.

staenker · 2023-09-09T09:54:50Z

same here, what's going on?

napbla · 2023-12-18T04:39:22Z

Put these in package.json

"dependencies": {
    "@mui/styled-engine": "npm:@mui/styled-engine-sc@^6.0.0-alpha.10",
    "@mui/material": "^5.15.2",
    "@mui/styled-engine-sc": "^6.0.0-alpha.10",
    ...
 "overrides": {
    "styled-components":"^5.3.11",
    "@mui/system": {
      "@mui/styled-engine": "npm:@mui/styled-engine-sc@^6.0.0-alpha.10"
    }
  },

If you do not completely remove node_modules and package-log.json before npm install,
accessing /admin-messenger will throws an error:
"Can't resolve '@emotion/styled' in '*/client/node_modules/@mui/system/node_modules/@mui/styled-engine'".
This is because npm already install the real version of @mui/styled-engine
Then you need to remove "name": "@mui/styled-engine-sc", from "node_modules/@mui/styled-engine"
in package-lock.json and commit it
to trick npm resolve @mui/styled-engine depedency of @mui/system by alias of "@mui/styled-engine"
instead of the installed real version.

fondberg added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Aug 19, 2021

mnajdova added bug 🐛 Something doesn't work docs Improvements or additions to the documentation and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Aug 20, 2021

oliviertassinari added the v5.x label Aug 21, 2021

This comment has been minimized.

Sign in to view

mnajdova mentioned this issue Aug 23, 2021

Revert "[examples] Update create-react-app examples with styled-components to use package aliases" #27917

Merged

mnajdova closed this as completed in #27917 Aug 23, 2021

dash-tobin mentioned this issue Sep 27, 2021

Add documentation for MUI5 with ts, npm, styled-components, webpack #28657

Closed

DoshiNeil pushed a commit to DoshiNeil/n8-fpl-eta-fe that referenced this issue Oct 3, 2021

additional dependency due to bug mui/material-ui#27846

59010e8

CodingDive mentioned this issue Jan 13, 2022

Error: Can't resolve '@mui/styled-engine' #30599

Closed

2 tasks

create-react-app-with-styled-components fails with Can't resolve '@emotion/react' #27846

create-react-app-with-styled-components fails with Can't resolve '@emotion/react' #27846

Comments

fondberg commented Aug 19, 2021 • edited Loading

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Context 🔦

Your Environment 🌎

fondberg commented Aug 19, 2021

anshul2807 commented Aug 20, 2021

anshul2807 commented Aug 20, 2021

fondberg commented Aug 20, 2021

anshul2807 commented Aug 20, 2021

mnajdova commented Aug 20, 2021

fondberg commented Aug 21, 2021 • edited Loading

oliviertassinari commented Aug 21, 2021 • edited Loading

This comment has been minimized.

mnajdova commented Aug 22, 2021

mnajdova commented Aug 23, 2021

DylanSp commented Sep 18, 2021

binxiaosyd commented Sep 24, 2021

mnajdova commented Sep 28, 2021

OPerel commented Oct 31, 2021

Macy-ma commented Oct 31, 2021 • edited Loading

karan316 commented Nov 13, 2021

AdiGutner commented Nov 13, 2021 • edited Loading

mnajdova commented Nov 13, 2021

daveteu commented Nov 16, 2021

karan316 commented Nov 17, 2021

wadehammes commented Nov 18, 2021 • edited Loading

rroslaniec commented Nov 26, 2021

Luksys5 commented Nov 30, 2021 • edited Loading

stoplion commented Jan 24, 2022

diguini commented Feb 4, 2022

eebbann commented Feb 22, 2022

jungjay-cb commented Mar 2, 2022 • edited Loading

mnajdova commented Mar 7, 2022

Leshe4ka commented Mar 19, 2022

tetchel commented Apr 5, 2022

Donhv commented Jun 23, 2022

Donhv commented Jun 23, 2022

aimad-majdou commented Nov 10, 2022

dtrenz commented Jan 18, 2023 • edited Loading

DeividVeloso commented Mar 14, 2023

DeividVeloso commented Mar 14, 2023

DeividVeloso commented Mar 14, 2023

tonymckendry commented Mar 16, 2023

staenker commented Sep 9, 2023

napbla commented Dec 18, 2023 • edited Loading

fondberg commented Aug 19, 2021 •

edited

Loading

fondberg commented Aug 21, 2021 •

edited

Loading

oliviertassinari commented Aug 21, 2021 •

edited

Loading

Macy-ma commented Oct 31, 2021 •

edited

Loading

AdiGutner commented Nov 13, 2021 •

edited

Loading

wadehammes commented Nov 18, 2021 •

edited

Loading

Luksys5 commented Nov 30, 2021 •

edited

Loading

jungjay-cb commented Mar 2, 2022 •

edited

Loading

dtrenz commented Jan 18, 2023 •

edited

Loading

napbla commented Dec 18, 2023 •

edited

Loading