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

[CodingDive]

Because of the hard github templates I almost forgot to say: Thank you so much for all the hard work on this library! I'm coming from a few different design-systems and I really love the components and api of mui! ❤️

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

After following the installation guide, when starting the app I'm getting following errors.

ERROR in ../../node_modules/@mui/system/esm/index.js 1:0-88
Module not found: Error: Can't resolve '@mui/styled-engine' in 'node_modules\@mui\system\esm'

I'm using styled-components but also tried temporarily adding emotion to my project which seems to work fine. I have followed the styled-engine-sc guide carefully but the error sticks around.

I'm using CRA with lerna and yarn workspaces. The styled-engine folder does appear in the root node_modules folder but for some reason, it can't be resolved.

Also tried deleting all packages in node_modules and reinstalled multiple times.

Expected behavior 🤔

No errors

Steps to reproduce 🕹

Couldn't find a way to reproduce this in a codesandbox yet but judging from the closed issues #28559 and #27846, some people that were commenting there were running into similar issues.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.22000
    CPU: (12) x64 AMD Ryzen 5 5500U with Radeon Graphics
    Memory: 3.06 GB / 15.35 GB
  Binaries:
    Node: 16.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
  Managers:
    pip3: 20.2.3 - C:\Python39\Scripts\pip3.EXE
  Utilities:
    Git: 2.31.1.
  SDKs:
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.17763.0
  IDEs:
    VSCode: 1.63.2 
  Languages:
    Python: 3.9.2
  Databases:
    PostgreSQL: 13.3 - C:\Program Files\PostgreSQL\13\bin\postgres.EXE
  Browsers:
    Chrome: 97.0.4692.71 
  Monorepos:
    Yarn Workspaces: 1.22.10
    Lerna: 4.0.0

[cryptominnow]

I'm having the same issue it's extremely strange, everything was working fine and without any changes to my site I ran into this error. Funny thing is I have a build live on vercel that's working from before the bug. I cloned the repo from that build and ran it and got the error.

It's not even consistent, sometimes with the exact same dependencies on a fresh installation I have no problems.

[CodingDive]

I also saw that the @mui folder in node_modules of the create-react-app styled-components typescript example project looked a little different than the folder in my node_modules despite setting up everything similarly in package.json and tsconfig files. That's one possibility where the inconsistency you are talking about is coming from!

[mnajdova]

Are you using yarn or npm (and which version)? Do you have some repository that I can look into? It's hard to say why it is happening without a clear reproduction.

[CodingDive]

Using yarn with yarn workspaces and lerna

[github-actions]

Since the issue is missing key information, and has been inactive for 7 days, it has been automatically closed.
If you wish to see the issue reopened, please provide the missing information.

[Valentin1918]

Was it solved somehow?

[mnajdova]

There wasn't any reproduction (repository) for us to look into, so the issue was automatically closed. If you have a reproduction, share it with us and we can re-open the issue.

[ppanthony]

In the subpackage I was getting this with Lerna too. Seems like adding the module resolver plugin works, just incase it helps anyone else out.

{
  "plugins": [
    [
      "module-resolver",
      {
        "root": ["./src"],
        "alias": {
          "@mui/styled-engine": "@mui/styled-engine-sc"
        }
      }
    ]
  ]
}

[MaxiSantos]

#27846

This is still happening.. wondering where the problem is..

Module not found: Can't resolve '@mui/styled-engine'

Import trace for requested module:
./node_modules/@mui/system/esm/ThemeProvider/index.js
./node_modules/@mui/system/esm/index.js

I have styled-engine folder under node_modules/@mui (and the engine is styled-compoennt-sr) I saw it working when changed styled-engine version to a different one (from 5.3.0 to latest) But after reinstalling all again (because I watend to see if it was working correctly) then it started to fail again

[boxi79]

Do not do package.json dependencies resolutions step, or it will cause your content of ./node_modules/@mui/styled-engine to be styled-engine-sc package.

package.json

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

Just do webpack.config.js and tsconfig.json part.

[vasujhawar2001]

#27846

This is still happening.. wondering where the problem is..

Module not found: Can't resolve '@mui/styled-engine'

Import trace for requested module:
./node_modules/@mui/system/esm/ThemeProvider/index.js
./node_modules/@mui/system/esm/index.js

I have styled-engine folder under node_modules/@mui (and the engine is styled-compoennt-sr) I saw it working when changed styled-engine version to a different one (from 5.3.0 to latest) But after reinstalling all again (because I watend to see if it was working correctly) then it started to fail again

I also faced the same issue, but after couple of packages reinstall and app build, it did go on its own.