[Migration] Cannot upgrade to v5 with styled-components

[AdiGutner]

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

[realleyriley]

Even a fresh project created with npx create-next-app gets this error after trying to use MUI v5.

I'm using latest node version (v16.13.0) on Windows.

Additionally, installing @emotion/react with npm does not have any effect ☹

[mbrookes]

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

[mnajdova]

@AdiGutner what version of nextjs are you using? The last time I tested it was on version 11, but 12 was released recently. I will check this now.

[mnajdova]

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,

[sh-dv]

I think you guys should make a nextjs-styled-components example without typescript too.

I am having a really hard time migrating my v4 project to v5. The codemod is not helping at all, and its full of PREFIX. and even tried to write the project from the ground up with a fresh nextjs installation got a lot of errors only just while setting it up!.

I think that the latest v4 release should stay stable for a long time and maintained. Meanwhile i am not switching until stability is proven with nextjs.

[mnajdova]

I think you guys should make a nextjs-styled-components example without typescript too.

This is already available - https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-styled-components-typescript

I am having a really hard time migrating my v4 project to v5.

Just to make sure, are you using styled-components or the default engine with emotion?

I think that the latest v4 release should stay stable for a long time and maintained. Meanwhile i am not switching until stability is proven with nextjs.

Our documentation is using the v5 with nextjs, I believe this is proving it's stability. Note that the issue is related to using v5 with styled-components (@mui/styled-engine-sc).

[sh-dv]

This is already available - https://github.com/mui-org/material-ui/tree/master/examples/nextjs-with-styled-components-typescript

Without...

Just to make sure, are you using styled-components or the default engine with emotion?

just makeStyles..

[sh-dv]

Just followed the guide again, migrating my Nextjs 12 mui v4 (just JSS) to v5 , got this error :

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

coming from the _document.js file. I tried to delete the _document.js file because i thought it may be the problem but i ended up with a new one.

MUI: adaptV4Theme() is deprecated. Follow the upgrade guide on https://mui.com/r/migration-v4#theme. Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. at Home (webpack-internal:///./pages/index.js:21:88) at MyApp (webpack-internal:///./pages/_app.js:16:18) at StyleRegistry (/node_modules/styled-jsx/dist/stylesheet-registry.js:231:34) at AppContainer (/node_modules/next/dist/server/render.js:325:29)

None of the index.js or _app.js files uses any kind of styles related to mui. Just the StyledEngineProvider and ThemeProvider wrapping the root.

[daveteu]

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 #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,

Feedback: Fyi I tested this and it's not working with the latest @mui packages

[aviculturist]

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"
  },

[wadehammes]

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"
  },

I am having the same issue. Oddly though, I only get this error when deploying to Vercel, everything works fine locally.

[aviculturist]

When I reverted back to @next the build completed.

[mnajdova]

Note that there are currently some issues with nextjs and styled-components integration. See https://github.com/mui-org/material-ui/issues/29742. I would propose using emotion unless there is a really good reason not to (I'd be curious to know what it is)

[mdfauzan97]

Hi, i'm not sure if this is relatable or not but i'm having the same issues while running my project locally (react/typescript)

Failed to compile.

/node_modules/@mui/system/esm/createStyled.js Attempted import error: 'internal_processStyles' is not exported from '@mui/styled-engine' (imported as 'processStyles').

currently using the latest version of mui/styled-engine dependencies: { "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest", "@mui/styled-engine-sc": "5.10.6", }

[mnajdova]

Hi, i'm not sure if this is relatable or not but i'm having the same issues while running my project locally (react/typescript)

Failed to compile.

/node_modules/@mui/system/esm/createStyled.js Attempted import error: 'internal_processStyles' is not exported from '@mui/styled-engine' (imported as 'processStyles').

This is likely due to a mismatch between the versions, check https://github.com/mui/material-ui/issues/33878