material-ui: [Migration] Cannot upgrade to v5 with styled-components

I have a project with NextJS, React, Typescript, MUI and Styled-Components I tried to upgrade MUI version from v4 to v5 and followed all the required steps, but I get build errors

Failed to compile.
./node_modules/@mui/styled-engine/GlobalStyles/GlobalStyles.js
Module not found: Can't resolve '@emotion/react' in '/tmp/build_b861d9b1/node_modules/@mui/styled-engine/GlobalStyles'
./node_modules/@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js
Module not found: Can't resolve '@emotion/react' in '/tmp/build_b861d9b1/node_modules/@mui/styled-engine/StyledEngineProvider'
./node_modules/@mui/styled-engine/index.js
Module not found: Can't resolve '@emotion/styled' in '/tmp/build_b861d9b1/node_modules/@mui/styled-engine'
./node_modules/@mui/styled-engine/index.js
Module not found: Can't resolve '@emotion/react' in '/tmp/build_b861d9b1/node_modules/@mui/styled-engine'

next.config.js is defined as follows:

const withPlugins = require("next-compose-plugins");

const withImages = require("next-images");

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

const nextConfig = {
	reactStrictMode: true,
	webpack: config => {
		config.resolve.alias = {
			...config.resolve.alias,
			"@mui/styled-engine": "@mui/styled-engine-sc",
		};
		return config;
	},
	eslint: {
		ignoreDuringBuilds: true,
	},
	images: {
		disableStaticImages: true,
	},
};

const config = withPlugins([withTM(nextConfig), withImages()]);

module.exports = config;

Please advise

About this issue

Original URL
State: open
Created 3 years ago
Reactions: 2
Comments: 15 (6 by maintainers)

Most upvoted comments

The issue is temporarily happening because the Popper component that was moved to the @mui/core package, depended on the @mui/styled-engine. It was fixed by https://github.com/mui-org/material-ui/pull/29488 so it should not happen in the next release (will be released today). In the meantime, you can add this package to the list of the modules you need to be transpiled

index 114ee969d9..39aaede564 100644
--- a/examples/nextjs-with-styled-components-typescript/next.config.js
+++ b/examples/nextjs-with-styled-components-typescript/next.config.js
@@ -1,4 +1,4 @@
-const withTM = require('next-transpile-modules')(['@mui/material', '@mui/system']); // pass the modules you would like to see transpiled
+const withTM = require('next-transpile-modules')(['@mui/material', '@mui/system', '@mui/core']); // pass the modules you would like to see transpiled

 module.exports = withTM({
   reactStrictMode: true,

mnajdova on Nov 16, 2021

I believe this is a related problem:

https://github.com/aviculturist/cnry/runs/4246215092?check_suite_focus=true#step:6:197

./node_modules/@mui/system/esm/ThemeProvider/ThemeProvider.js
Module not found: Can't resolve '@mui/styled-engine' in '/home/runner/work/cnry/cnry/node_modules/@mui/system/esm/ThemeProvider'

In this case, an upgrade to the latest @mui broke my build process with the above error. Using styled-components and I changed from @next to @latest in package.json as indicated in the latest docs.

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

aviculturist on Nov 18, 2021

When I reverted back to @next the build completed.

aviculturist on Nov 18, 2021

The NextJS example appears to have the same issue.

With a fresh project I can get a MUI component to work in dev mode by adding it to a running page, but as soon as I reload the page the error occurs. Odd!

cc @mnajdova

mbrookes on Nov 15, 2021