[style-engine] style-components resolutions does not work with `npm` #28559

HyphenFrox · 2021-09-23T19:20:44Z

MUI looks for @emotion/react in styled-engine even after installing styled-engine-sc and setting up package aliases.

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 😯

I get a compile time error

Module not found: can't resolve '@emotion/react' in 'C:\Users\Username\ProjectName\node_modules@mui\system\node_modules@mui\styled-engine'

Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.lo.tmp'

Expected Behavior 🤔

The app should be compiled using styled-engine-sc and styled components.

Steps to Reproduce 🕹

You can view the codesandbox

I installed MUI v5.0 by following the instructions at https://mui.com/getting-started/installation/#npm. i.e.
npm install @mui/material @mui/styled-engine-sc styled-components

Then edited the package.json by following instructions at https://mui.com/guides/styled-engine/

I added the dependency "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
I added the resolutions field with:

"resolutions": {
"@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
},

Finally, I ran "npm install" to install all the dependencies.

But at compile-time, I got this error:

Module not found: can't resolve '@emotion/react' in 'C:\Users\Username\ProjectName\node_modules@mui\system\node_modules@mui\styled-engine'

Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.lo.tmp'

I ran "npm outdated" and I got this result:

Package @mui/styled-engine
Current npm:@mui/styled-engine-sc@undefined
Wanted npm:@mui/styled-engine-sc@5.0.0
Latest npm:@mui/styled-engine-sc@5.0.0

So from my understanding styled-engine-sc did not get installed.

Your Environment 🌎

System:
OS: Windows 10 10.0.19043
Binaries:
Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
Yarn: Not Found
npm: 6.14.15 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: Not Found
Edge: Spartan (44.19041.1023.0), Chromium (93.0.961.52)
npmPackages:
@mui/core: 5.0.0-alpha.48
@mui/material: ^5.0.1 => 5.0.1
@mui/private-theming: 5.0.1
@mui/styled-engine-sc: ^5.0.0 => 5.0.0
@mui/system: 5.0.1
@mui/types: 7.0.0
@mui/utils: 5.0.1
@types/react: 17.0.24
react: ^17.0.2 => 17.0.2
react-dom: ^17.0.2 => 17.0.2
styled-components: ^5.3.1 => 5.3.1

I used chrome version 93

AndreaEsposit · 2021-09-23T19:46:55Z

I have exactly the same problem, would really like to know how to solve this,

Forchapeatl · 2021-09-23T19:50:13Z

This commands should get it working
npm install @emotion/react
npm install @emotion/styled

AndreaEsposit · 2021-09-23T19:51:18Z

But isn't the point to NOT have to use those two dependencies?

This commands should get it working
npm install @emotion/react
npm install @emotion/styled

HyphenFrox · 2021-09-23T19:52:24Z

This commands should get it working
npm install @emotion/react
npm install @emotion/styled

I am using styled-components. Installing emotion defeats the entire purpose of using styled-components.

AndreaEsposit · 2021-09-23T19:55:43Z

This commands should get it working
npm install @emotion/react
npm install @emotion/styled

I am using styled-components. Installing emotion defeats the entire purpose of using styled-components.

Completely agree!

Forchapeatl · 2021-09-23T19:57:53Z

ok, can you try clearing the cache npm cache clean --force and re install the required npm modules

HyphenFrox · 2021-09-23T20:03:33Z

ok, can you try clearing the cache npm cache clean --force and re install the required npm modules

Just did that. Still getting same error. Earlier I even deleted the node_modules folder.

From my understanding, the styled-engine-sc package is not getting installed because the instructions on the Material UI Docs tell you to install the package "npm:@mui/styled-engine-sc@latest" which is for some reason not being recognized by npm.

Forchapeatl · 2021-09-23T20:14:32Z

ok, can you try clearing the cache npm cache clean --force and re install the required npm modules

Just did that. Still getting same error. Earlier I even deleted the node_modules folder.

From my understanding, the styled-engine-sc package is not getting installed because the instructions on the Material UI Docs tell you to install the package "npm:@mui/styled-engine-sc@latest" which is for some reason not being recognized by npm.

A work around might be to replace the dependency @mui/styled-engine-sc with @mui/styled-engine

HyphenFrox · 2021-09-23T20:27:23Z

ok, can you try clearing the cache npm cache clean --force and re install the required npm modules

Just did that. Still getting same error. Earlier I even deleted the node_modules folder.
From my understanding, the styled-engine-sc package is not getting installed because the instructions on the Material UI Docs tell you to install the package "npm:@mui/styled-engine-sc@latest" which is for some reason not being recognized by npm.

A work around might be to replace the dependency @mui/styled-engine-sc with @mui/styled-engine

As the Docs say, "@mui/styled-engine" is a thin wrapper around emotion's styled() API. Using it instead of "@mui/styled-engine-sc" would mean using emotion.

Forloski · 2021-09-23T21:36:10Z

I'm also getting this error and is very weird seeing they said styled components would work the same as emotion.

siriwatknp · 2021-09-24T04:09:23Z

Thanks for providing the codesandbox but following the doc works fine in my local machine (I used with create-react-app). Can you provide the repo that we can reproduce?

Note: you can check if the resolution works by looking at node_modules. Here, the style-engine should have style-components

AndreaEsposit · 2021-09-24T06:17:35Z

Thanks for providing the codesandbox but following the doc works fine in my local machine (I used with create-react-app). Can you provide the repo that we can reproduce?

Note: you can check if the resolution works by looking at node_modules. Here, the style-engine should have style-components

Have you done anything special that is not written in the doc? I think that my main problem (and might be @HyphenFrox's problem too) is that there is no "resolution" with npm (I am not using yarn). So, I presume that the docs assume that the developer is using yarn as their package manager? Or did you get it to work using npm as your package manager? If that is the case, then it would be very nice to get a npm solution, or to be specified in the doc that you HAVE to use yarn.

I found out an example that gets it to work with npm (I think): example. Here, however, it is not as straightforward as just adding the two lines mentioned in doc to packet.json.

Just correct me if I wrote something wrong. It could well be that npm does in fact have "resolve" nowadays.

siriwatknp · 2021-09-24T07:09:33Z

Have you done anything special that is not written in the doc

No. I did the same as the docs.

Or did you get it to work using npm as your package manager

npm does not work (both v6 and v7). only yarn works for me. I will add to the docs.

AndreaEsposit · 2021-09-24T09:11:11Z

@siriwatknp

Do you have any solution for those using npm as package manager?

mnajdova · 2021-09-24T09:17:05Z

@AndreaEsposit the examples work with both npm and yarn. Have you tried:

Maybe we should add a note on the docs, that for npm it's best to use the examples

mnajdova · 2021-09-24T09:19:01Z

Maybe we should follow - https://preactjs.com/guide/v8/switching-to-preact

AndreaEsposit · 2021-09-24T09:36:42Z

@AndreaEsposit the examples work with both npm and yarn. Have you tried:
1. create-react-app - https://github.com/mui-org/material-ui/tree/master/examples/create-react-app-with-styled-components

2. nextjs - https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-styled-components-typescript
Maybe we should add a note on the docs, that for npm it's best to use the examples

This works for new projects, yes, however it is not straightforward for ongoing projects. Seems like this example utilizes "react-app-rewired" and "customize-cra". Will try to mimic the example and I will update my comment if I get it to work.

HyphenFrox · 2021-09-24T12:24:19Z

@siriwatknp , the code sandbox is the simplest way to reproduce the error I am getting. The resolutions field does not work with npm.

HyphenFrox · 2021-09-24T12:31:01Z

@mnajdova I tried adding the exact same dependencies in my app as in the package.json of create-react-app-with-styled-components but my guess is that you are using customize-cra and react-app-rewired in the devDependencies to make it work. What if we don't want to add those dependencies? Isn't there a simpler way of making a MUI app with styled-components?

Keezer · 2021-09-24T12:45:23Z

I managed to get this working by adding in an alias to the resolve section in webpack.config.js - since addWebpackAlias() in customize-cra seems to just do exactly that.

	resolve:
	{
		alias: {
			'@mui/styled-engine': '@mui/styled-engine-sc',
		}
	},

FWIW, I'm using ReactJS.Net so I can't use the CRA methods either. (or the emotion engine!)

oscar-b · 2021-09-27T10:38:06Z

Both react-app-rewired and customize-cra are old and poorly maintained (doesn't seem to support CRA v4), it doesn't feel lika a viable official solution for MUI to promote when using styled-components.

I would very much prefer a solution not requiring aliasing (or to be more specific, only rely on vanilla CRA), but if that's the only way forward, https://github.com/gsoft-inc/craco seems like a more up to date solution for CRA configuration handling.

wbruntra · 2021-09-28T09:36:00Z

I am having the same issue, using npx create-react-app
I copy-paste the Button example from
https://mui.com/getting-started/usage/

import Button from '@mui/material/Button'

export default function MuiButton() {
  return <Button variant="contained">Hello World</Button>
}

yarn start crashes with missing dependencies.

Fixed by running:
yarn add @emotion/react @emotion/styled

My OS is Ubuntu.

mnajdova · 2021-09-30T10:39:54Z

I would very much prefer a solution not requiring aliasing (or to be more specific, only rely on vanilla CRA), but if that's the only way forward, https://github.com/gsoft-inc/craco seems like a more up to date solution for CRA configuration handling.

~~@oscar-b thanks for sharing this. Would you like to update the examples with styled-components?~~ Nevermind will do it in the same PR :)

I will update the documentation with the following info:

the package alias works only with yarn not npm
if you are using npm you need to add a webpack (or other bundler) alias. in addition if you are using TypeScript, you need to update your tsconfig paths

We can probably get an inspiration from preact and see how they are solving the problem (from what I could see, they are depending on bundler's aliasing)

AlexGusew · 2021-09-30T15:24:12Z

We had the same issue. The solution was to add @mui/lab to next.config.js 🤦🏿‍♀️

const withTM = require('next-transpile-modules')(['@mui/material', '@mui/system', '@mui/lab']);

HyphenFrox added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 23, 2021

siriwatknp added status: waiting for author Issue with insufficient information and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 24, 2021

siriwatknp added docs Improvements or additions to the documentation external dependency Blocked by external dependency, we can’t do anything about it and removed status: waiting for author Issue with insufficient information labels Sep 24, 2021

siriwatknp changed the title ~~MUI with styled components: can't resolve @emotion/react in @mui/styled-engine~~ [style-engine] style-components resolutions does not work with npm Sep 24, 2021

eps1lon assigned mnajdova Sep 28, 2021

mnajdova mentioned this issue Sep 30, 2021

[docs] Improve styled-components integration #28713

Merged

mnajdova mentioned this issue Oct 4, 2021

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

Closed

mnajdova closed this as completed in #28713 Oct 4, 2021

CodingDive mentioned this issue Jan 13, 2022

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

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[style-engine] style-components resolutions does not work with `npm` #28559

[style-engine] style-components resolutions does not work with `npm` #28559

HyphenFrox commented Sep 23, 2021 •

edited

Loading

AndreaEsposit commented Sep 23, 2021

Forchapeatl commented Sep 23, 2021

AndreaEsposit commented Sep 23, 2021

HyphenFrox commented Sep 23, 2021

AndreaEsposit commented Sep 23, 2021

Forchapeatl commented Sep 23, 2021

HyphenFrox commented Sep 23, 2021 •

edited

Loading

Forchapeatl commented Sep 23, 2021

HyphenFrox commented Sep 23, 2021

Forloski commented Sep 23, 2021

siriwatknp commented Sep 24, 2021 •

edited

Loading

AndreaEsposit commented Sep 24, 2021 •

edited

Loading

siriwatknp commented Sep 24, 2021

AndreaEsposit commented Sep 24, 2021

mnajdova commented Sep 24, 2021

mnajdova commented Sep 24, 2021

AndreaEsposit commented Sep 24, 2021

HyphenFrox commented Sep 24, 2021

HyphenFrox commented Sep 24, 2021

Keezer commented Sep 24, 2021 •

edited

Loading

oscar-b commented Sep 27, 2021

wbruntra commented Sep 28, 2021

mnajdova commented Sep 30, 2021 •

edited

Loading

AlexGusew commented Sep 30, 2021

[style-engine] style-components resolutions does not work with npm #28559

[style-engine] style-components resolutions does not work with npm #28559

Comments

HyphenFrox commented Sep 23, 2021 • edited Loading

Current Behavior 😯

Expected Behavior 🤔

Steps to Reproduce 🕹

Your Environment 🌎

AndreaEsposit commented Sep 23, 2021

Forchapeatl commented Sep 23, 2021

AndreaEsposit commented Sep 23, 2021

HyphenFrox commented Sep 23, 2021

AndreaEsposit commented Sep 23, 2021

Forchapeatl commented Sep 23, 2021

HyphenFrox commented Sep 23, 2021 • edited Loading

Forchapeatl commented Sep 23, 2021

HyphenFrox commented Sep 23, 2021

Forloski commented Sep 23, 2021

siriwatknp commented Sep 24, 2021 • edited Loading

AndreaEsposit commented Sep 24, 2021 • edited Loading

siriwatknp commented Sep 24, 2021

AndreaEsposit commented Sep 24, 2021

mnajdova commented Sep 24, 2021

mnajdova commented Sep 24, 2021

AndreaEsposit commented Sep 24, 2021

HyphenFrox commented Sep 24, 2021

HyphenFrox commented Sep 24, 2021

Keezer commented Sep 24, 2021 • edited Loading

oscar-b commented Sep 27, 2021

wbruntra commented Sep 28, 2021

mnajdova commented Sep 30, 2021 • edited Loading

AlexGusew commented Sep 30, 2021

[style-engine] style-components resolutions does not work with `npm` #28559

[style-engine] style-components resolutions does not work with `npm` #28559

HyphenFrox commented Sep 23, 2021 •

edited

Loading

HyphenFrox commented Sep 23, 2021 •

edited

Loading

siriwatknp commented Sep 24, 2021 •

edited

Loading

AndreaEsposit commented Sep 24, 2021 •

edited

Loading

Keezer commented Sep 24, 2021 •

edited

Loading

mnajdova commented Sep 30, 2021 •

edited

Loading