Build warnings with MUI - barrel_optimize

[muhammedogz]

Link to the code that reproduces this issue

https://github.com/muhammedogz/nextjs-mui-build-warnings

To Reproduce

1. Clone the Repo
2. Run npm i && npm run build

--
Also you can create the warning from MUI template.

1. Download MUI template with Nextjs-pages: https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-pages-router-ts
2. Add this line to index.tsx
const theme = useTheme();
3. Run npm run build

Current vs. Expected behavior

Build should be completed without warnings.

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: linux
      Arch: x64
      Version: #1 SMP Fri Jan 27 02:56:13 UTC 2023
    Binaries:
      Node: 20.7.0
      npm: 10.1.0
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.5.2-canary.1
      eslint-config-next: 13.5.1
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

Not sure

Additional context

Maybe this PR could introduces this warning.

Warrning messages from build.

 ⚠ Compiled with warnings

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./Box' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./ClickAwayListener' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./CssBaseline' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./darkScrollbar' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./Fade' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./Grow' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./Hidden' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./MenuList' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

Import trace for requested module:
__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
./pages/index.tsx

_NEXT-1644

[ticovix]

I downgraded the NEXT version to 13.4.19 and the warnings stopped.

[balazsorban44]

It's not necessary to comment "same issue" without providing more context/a public, minimal reproduction. Please upvote the issue instead 👍, or subscribe to notifications. Thanks

[yelodevopsi]

This seem to be a bug in the MUI package. It is only triggered when importing styled like this:

import { styled } from "@mui/material";

As a workaround, I recommend importing { styled } from styles instead:
import { styled } from "@mui/material/styles";

The error has vanished from my styled Custom MUI component for now. 👍

[baloodevil]

This seem to be a bug in the MUI package. It is only triggered when importing styled like this:

import { styled } from "@mui/material";

As a workaround, I recommend importing { styled } from styles instead: import { styled } from "@mui/material/styles";

The error has vanished from my styled Custom MUI component for now. 👍

Changing the import of styled from @mui/material to @mui/material/styles did not work for me. Downgrading to 13.4.19 did. But it would be good to have the performance improvements of 13.5.

[yelodevopsi]

This seem to be a bug in the MUI package. It is only triggered when importing styled like this:
import { styled } from "@mui/material";
As a workaround, I recommend importing { styled } from styles instead: import { styled } from "@mui/material/styles";
The error has vanished from my styled Custom MUI component for now. 👍

Changing the import of styled from @mui/material to @mui/material/styles did not work for me. Downgrading to 13.4.19 did. But it would be good to have the performance improvements of 13.5.

Might be multiple places in the project you import either styled or utils from `@mui/material?
There might be multiple places this occurs, just check the error output. @muhammedogz metioned the /utils just like I had. Look a the source file, and you might find an alternative import path.

Not sure if this should be handled by Vercel or MUI however.

FYI: I have a greenfield project with one component, so I've not had the time yet to import much MUI components all over the place.

[muhammedogz]

Actually, it seems mostly related to Next.js. We encountered this issue with MUI, but I don't think it's specific to MUI.

Also, I haven't downgraded my Next.js version. It's not affecting my build; it's just giving warnings (suppressing warnings is my passion 😄), and my production doesn't seem to be affected by anything.

For clarification, in our project, I've used nearly every MUI component in our app, and there has been no negative user feedback regarding these warnings. I can humbly say these warnings are ignorable right now.🤡

[alex-statsig]

Ran into the same thing: #55834

[ElectricCodeGuy]

Found a Fix after bashing my head against it for 2 days

Chaning from:
import { Box, Button, Container, Grid, Typography, Card, CardContent, CardMedia, Divider } from '@mui/material';

to

import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Divider from '@mui/material/Divider'; import Button from '@mui/material/Button';

It is not every component you have to do it. For what i have tested it is only some of the MUI components(not sure witch) and if you import children into parents both both components must be changed. Server Components must also change.

this fixed, for me atleast all bugs and warnings and render errors related to:
⨯ Internal error: Error: Could not find the module "/home/xxxxxx/xxxxxxx/xxxxxxxx/node_modules/@mui/material/node/Link/index.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler. and __barrel_optimize__?names

Slugs, Parallel route and possible also all other Next Routing that uses MUI must also be changed to get rid of the bug/warning

[ticovix]

Found a Fix after bashing my head against it for 2 days

Chaning from: import { Box, Button, Container, Grid, Typography, Card, CardContent, CardMedia, Divider } from '@mui/material';

to

import Box from '@mui/material/Box'; import Container from '@mui/material/Container'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardMedia from '@mui/material/CardMedia'; import Divider from '@mui/material/Divider'; import Button from '@mui/material/Button';

It is not every component you have to do it. For what i have tested it is only some of the MUI components(not sure witch) and if you import children into parents both both components must be changed. Server Components must also change.

this fixed, for me atleast all bugs and warnings and render errors related to: ⨯ Internal error: Error: Could not find the module "/home/xxxxxx/xxxxxxx/xxxxxxxx/node_modules/@mui/material/node/Link/index.js#" in the React Client Manifest. This is probably a bug in the React Server Components bundler. and __barrel_optimize__?names

Slugs, Parallel route and possible also all other Next Routing that uses MUI must also be changed to get rid of the bug/warning

I use the "eslint-plugin-mui-path-imports" dependency that does this automatic import work (I even recommend it), but the warnings continue to be displayed.

[stinkokenzo]

I solved my problem importing the functions from MUI in a separated import. In the warning:

__barrel_optimize__?names=Container,Typography,Box,useTheme!=!./node_modules/@mui/material/index.js
The requested module '__barrel_optimize__?names=useTheme&wildcard!=!./Box' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=useTheme&wildcard!=!./utils'

the problem is the import of useTheme.
Previously I was importing like this:

import { Box, Button, Grid, Typography, useMediaQuery, useTheme } from '@mui/material';

I solved importing like this:

import { useTheme } from '@mui/material/styles';

I think this is due to the new feature "Optimized Package Imports".

Hope it helps.
Cheers

[desneck]

Not to repeat others above but my solution was converting
import { CssBaseline, ThemeProvider } from "@mui/material";

to:

import ThemeProvider  from "@mui/material/styles/ThemeProvider";
import CssBaseline from "@mui/material/CssBaseline";

Hope it helps.

[ticovix]

In fact, the solutions from @yelodevopsi and @ElectricCodeGuy works well here. Doing what both said in all imports, the warnings disappear. Thank you guys.

[Bro3Simon]

The "fixes" that are being posted aren't really fixes but workarounds. I appreciate the cooperation and sharing so we can get it to work in the meantime! However, since it worked before Next version 13.5, I believe its on Next to fix not MUI. Isn't this a tree shaking issue that should be supported by Next?

https://mui.com/material-ui/guides/minimizing-bundle-size/#when-and-how-to-use-tree-shaking

[rroslaniec]

I can add that material-ui-popup-state is also affected and not able to get rid-off this warning for this line:

import HoverMenu from 'material-ui-popup-state/HoverMenu'

[schneckentempo]

for me the error stopped showing up after changing
import { styled } from "@mui/material";
to
import { styled } from "@mui/system";

[nik0145]

I have written a codemod to change the import of mui and separate components from @mui/material and styles @mui/material/styles.

import { Box, Link, Typography, Toolbar, IconButton, styled, useTheme, Select } from '@mui/material';

to

import { Box, Link, Typography, Toolbar, IconButton, Select } from '@mui/material';
import { styled, useTheme } from '@mui/material/styles';

Create a file named optimal-imports-new.js in your project, and after installing jscodeshift npm install -g jscodeshift execute the command jscodeshift -t optimal-imports-new.js src.
example jscodeshift -t scripts/optimal-imports-new.js src --extensions=tsx --parser=tsx

optimal-imports-new.js

code

const styledImport = ['createTheme', 'useTheme', 'ThemeProvider', 'styled', 'Theme', 'alpha'];

module.exports = function (file, api, options) {
  const j = api.jscodeshift;
  const root = j(file.source);
  const printOptions = options.printOptions || {
    quote: 'single',
    trailingComma: true,
    lineTerminator: '\n',
  };
  root
    .find(j.ImportDeclaration, {
      source: { value: '@mui/material' },
    })
    .forEach(path => {
      const specifiers = path.value.specifiers;
      const newImportsMui = [];
      const newImports = [];
      const stylesImportSpecifiers = [];

      specifiers.forEach(specifier => {
        if (styledImport.includes(specifier.local.name)) {
          stylesImportSpecifiers.push(j.importSpecifier(specifier.local));
        } else {
          newImportsMui.push(j.importSpecifier(specifier.local));
        }
      });

      if (newImportsMui.length > 0) {
        newImports.push(j.importDeclaration(newImportsMui, j.literal('@mui/material')));
      }
      if (stylesImportSpecifiers.length > 0) {
        newImports.push(j.importDeclaration(stylesImportSpecifiers, j.literal('@mui/material/styles')));
      }

      // Replace the original import with new ones
      j(path).replaceWith(newImports);
    });
  return root.toSource(printOptions);
};

I also wrote a codemod to change imports for @mui/material, transforming
import { Button, MenuItem, styled, useTheme } from '@mui/material';
to

import Button from '@mui/material/Button';
import MenuItem from '@mui/material/MenuItem';
import { styled, useTheme } from '@mui/material/styles';

code

However, I still had to add some code manually because props(GridProps, SxProps) and classes (badgeClasses, outlinedInputClasses) were also imported in the code. Use it at your own risk, and I'd appreciate it if you could help enhance this code.

const styledImport = ['createTheme', 'useTheme', 'ThemeProvider', 'styled', 'Theme', 'alpha'];
module.exports = function (file, api, options) {
  const j = api.jscodeshift;
  const root = j(file.source);
  const printOptions = options.printOptions || {
    quote: 'single',
    trailingComma: true,
    lineTerminator: '\n',
  };
  root
    .find(j.ImportDeclaration, {
      source: { value: '@mui/material' },
    })
    .forEach(path => {
      const specifiers = path.value.specifiers;
      const stylesImportSpecifiers = [];
      const newImports = specifiers.map(specifier => {
        if (styledImport.includes(specifier.local.name)) {
          stylesImportSpecifiers.push(j.importSpecifier(specifier.local));
        } else if (specifier.local.name === 'SelectChangeEvent') {
          return j.importDeclaration([j.importSpecifier(specifier.local)], j.literal('@mui/material/Select'));
        } else if (specifier.local.name === 'SxProps') {
          return j.importDeclaration([j.importSpecifier(specifier.local)], j.literal('@mui/system'));
        } else {
          return j.importDeclaration([j.importDefaultSpecifier(specifier.local)], j.literal(`@mui/material/${specifier.local.name}`));
        }
      });
      if (stylesImportSpecifiers.length > 0) {
        newImports.push(j.importDeclaration(stylesImportSpecifiers, j.literal('@mui/material/styles')));
      }
      j(path).replaceWith(newImports);
    });
  return root.toSource(printOptions);
};
You can check out the MUI codemod here: [codemods mui](https://github.com/mui/material-ui/tree/master/packages/mui-codemod/src/v5.0.0)

I hope this helps you!

[oliviertassinari]

There is a potential workaround on Material UI's side:

diff --git a/packages/mui-material/src/index.js b/packages/mui-material/src/index.js
index bcfd9bdcfe..2a6c5934f2 100644
--- a/packages/mui-material/src/index.js
+++ b/packages/mui-material/src/index.js
@@ -3,7 +3,6 @@
 import * as colors from './colors';

 export { colors };
-export * from './styles';

 export * from './utils';

@@ -409,6 +408,7 @@ export { default as useAutocomplete } from './useAutocomplete';
 export { default as GlobalStyles } from './GlobalStyles';
 export * from './GlobalStyles';

-export { StyledEngineProvider } from './styles';
+export { StyledEngineProvider, useTheme, … } from './styles';

 export { unstable_composeClasses } from '@mui/base/composeClasses';

removing the barrel export. But it feels odd that we would need to change this. I'm not even sure it would cover all the cases. We effectively couldn't use barrel imports.

[hotspoon]

I downgraded the NEXT version to 13.4.19 and the warnings stopped.

this is working for me, next version 13.5 makes that warning shows up

[DaRabus]

Any official input on this issue? Have tried removing our existing modularizeImports config and bumping all the way to 13.5.4 but no luck so far. Suggestions to update imports seem misguided given:

* VSCode will autocomplete to import from "@mui/material" rather than module specific files

* The new optimizePackageImports functionality specifically references being able to use named imports without impact: https://nextjs.org/docs/app/api-reference/next-config-js/optimizePackageImports

* There's nothing inherently wrong with the named imports style and it produced no warnings previously

As mentioned above already, may read the changes in the NextJS update, it's explained there why it "suddenly" shows the warning.

Just sort the imports properly and use the right place to import the required modules, like the useTheme and useStyles for example has to come from the mui/styles

Most components from the mui/material.

alpha/darken for example comes from mui/material/styles

I added some Eslint rules to my repo to ensure my co-workers to follow the path.

The warnings are telling you which import is wrong, so may just read them.

[JanStevens]

An official answer would be great. Is this going to be fixed in an upcoming release or is nextjs now also very opinionated how dependencies should manage their exports aka expects every dependency to fall in line and do it the nextjs way?

FYI the exports from mui are 100% valid.

[Zach-Jaensch]

The warnings are telling you which import is wrong, so may just read them.

I certainly don’t want to start drama on the internet, but there is no wrong way to import these utils and components if the way is documented by the mentioned library maintainers.

It’s disappointing that Vercel have not started to address this, even with a similar “we are looking at it”. I understand they are extremely busy with many issues to get too, but many of these comments are repeating the same incorrect statements due to an issue with something that cannot be turned off.

If the fix is going to be challenging, at the very least allow us to opt out, and if we already can, make the documentation very clear.

[marcusengel]

Not to repeat others above but my solution was converting import { CssBaseline, ThemeProvider } from "@mui/material";

to:

import ThemeProvider  from "@mui/material/styles/ThemeProvider";
import CssBaseline from "@mui/material/CssBaseline";

Hope it helps.

This was exactly the solution for me. Looks like ThemeProvider has moved?! It's not inside @mui/material anymore but inside @mui/material/styles.

[jorcelinojunior]

Hey everyone! 🙌

In my project, I found myself needing to refactor imports across more than 400 files due to the changes in MUI v5. Manually modifying each file was simply not viable, so I created a small TypeScript script to automate the process. I figured that this might be helpful to others facing the same challenge, so I wanted to share it.

The script takes in your old import statements and outputs the new format. It even handles some special cases, such as ThemeProvider, styled, and useTheme, which have unique paths.

Special Imports Handled:

ThemeProvider -> @mui/material/styles/ThemeProvider
styled        -> @mui/material/styles
useTheme      -> @mui/material/styles

Here's how you can use the script:

1. Go to playcode.io/1617977. (this is an online TypeScript editor with the script below already loaded)
2. Paste the script below into the editor.

function transformImportStatement(input: string): string {
    const importRegex = /import\s*{([\s\S]*?)}\s*from\s*['"]([^'"]+)['"]\s*;?/;
    const match = input.match(importRegex);

    if (!match) {
        return input; // Return the input line if it doesn't match the expected import pattern
    }

    const components = match[1]
        .split(',')
        .map(s => s.trim())
        .filter(s => s.length > 0)
        .sort();

    const modulePath = match[2];

    const specialImports: Record<string, string> = {
        'ThemeProvider': '@mui/material/styles/ThemeProvider',
        'styled': '@mui/material/styles',
        'useTheme': '@mui/material/styles'
    };

    const standardImports: string[] = [];
    const specialImportLines: Record<string, string[]> = {};

    components.forEach(component => {
        if (specialImports[component]) {
            if (!specialImportLines[specialImports[component]]) {
                specialImportLines[specialImports[component]] = [];
            }
            specialImportLines[specialImports[component]].push(component);
        } else {
            standardImports.push(`import ${component} from '${modulePath}/${component}'`);
        }
    });

    const specialImportStatements = Object.entries(specialImportLines).map(([path, components]) => {
        return `import { ${components.join(', ')} } from '${path}'`;
    });

    return [...standardImports, ...specialImportStatements].join('\n');
}

const input = `
import {
  ThemeProvider,
  CssBaseline,
  IconButton,
  Button,
  Typography,
  Badge,
} from "@mui/material";
`;

const result = transformImportStatement(input);
console.log(result);

3. Below the script, call the transformImportStatement function with your import statement as an argument.

Example:

Input:

transformImportStatement(`import { ThemeProvider, CssBaseline, IconButton, Button, Typography, Badge } from "@mui/material"`);
// OR
transformImportStatement(`
import {
  ThemeProvider,
  CssBaseline
  IconButton, 
  Button, 
  Typography, 
  Badge
} from "@mui/material";
`);

Output:

import Badge from '@mui/material/Badge'
import Button from '@mui/material/Button'
import IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'

I hope this helps speed up the migration process for some of you. If you find any issues or have suggestions for improvement, please let me know!

Happy coding! 💻

[MasterProvider]

I upgraded to the new npm version of MUI but still have same issue

"dependencies": {
  "@emotion/cache": "^11.11.0",
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.14.12",
  "@mui/lab": "^5.0.0-alpha.147",
  "@mui/material": "^5.14.12",
  "next": "^13.5.4",
  "react": "18.2.0",
  "react-dom": "18.2.0",
},
"devDependencies": {
  "eslint": "^8.50.0",
  "eslint-config-next": "^13.5.4"
}

[takecchi]

Has a conclusion been reached regarding this issue?

I believe the core issue is not about changing the way of importing, but the fact that the optimization settings are hard-coded and cannot be modified.

While I appreciate that Next.js supports the optimization of other styling libraries, given the issues that have arisen, wouldn't it be better to allow users to specify as before, or making it possible to override it in next.config.js?

[MasterProvider]

I think it will be stable in the next release v13.5.5, because in v13.5.5-canary.4, there are no more warning states

"dependencies": {
  "@emotion/cache": "^11.11.0",
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.14.12",
  "@mui/lab": "^5.0.0-alpha.147",
  "@mui/material": "^5.14.12",
  "next": "^13.5.5-canary.4",
  "react": "18.2.0",
  "react-dom": "18.2.0",
},
"devDependencies": {
  "eslint": "^8.50.0",
  "eslint-config-next": "^13.5.4"
}

[oliviertassinari]

@shuding Great, thanks!

[Marviel]

I think it will be stable in the next release v13.5.5, because in v13.5.5-canary.4, there are no more warning states

"dependencies": {
  "@emotion/cache": "^11.11.0",
  "@emotion/react": "^11.11.1",
  "@emotion/styled": "^11.11.0",
  "@mui/icons-material": "^5.14.12",
  "@mui/lab": "^5.0.0-alpha.147",
  "@mui/material": "^5.14.12",
  "next": "^13.5.5-canary.4",
  "react": "18.2.0",
  "react-dom": "18.2.0",
},
"devDependencies": {
  "eslint": "^8.50.0",
  "eslint-config-next": "^13.5.4"
}

appears true for me as well. Thanks all!

[Isaac1606]

Will this be sorted in the next release?

[aminnairi]

I had a line that was auto-imported thanks to VSCode like this

import { PaletteMode, createTheme } from "@mui/material":

I had to keep the PaletteMode since I'm using TypeScript in order to have a proper type checking when changing the mode on the ThemeProvider.

Hovever, it did not like the import of createTheme from @mui/material. You have to import it just as any component as stated in the documentation by using a granular import path.

Here is what did the trick.

import { PaletteMode } from "@mui/material";
import createTheme from "@mui/material/styles/createTheme";

Now I have no warning and I haven't downgraded my Next.js version either.

[rtrembecky]

@aminnairi as mentioned earlier, your imports before were perfectly valid and you shouldn't need to change them. I can also confirm that this was fixed in v13.5.5-canary.4, specifically in #56489.

[epsilon11101]

works for me @aminnairi ty!

[chrismuiruriz]

This seem to be a bug in the MUI package. It is only triggered when importing styled like this:

import { styled } from "@mui/material";

As a workaround, I recommend importing { styled } from styles instead: import { styled } from "@mui/material/styles";

The error has vanished from my styled Custom MUI component for now. 👍

Thanks @yelodevopsi this approach worked.

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.