Conflicting Star Exports Warnings with Next.js 13.5 and MUI

[lucasvidela94]

Since the recent update to Next.js, specifically in version 13.5, I've been encountering new warnings in the terminal related to dependencies. These warnings seem to be related to the handling of barrels (modules that re-export multiple modules) and might be caused by changes in how Next.js deals with them. While these warnings don't seem to affect the functionality of my application, they are filling up the terminal and preventing to read the logs.

Specific Errors:

• Error 1:

• Import trace for the requested module:

  __barrel_optimize__?names=Stack,Typography,useMediaQuery,useTheme!=!./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/index.js
  ./src/app/components/PageFooter.tsx
  ./src/app/login/page.tsx
  

• Error 2:

• Import trace for the requested module:

  __barrel_optimize__?names=Stack,Typography,useMediaQuery,useTheme!=!./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/@mui/material/index.js
  ./src/app/components/PageFooter.tsx
  ./src/app/login/page.tsx
  

• [Repeat for other errors...]

These warnings are consistently appearing in the terminal, making it difficult to review other logs and debug effectively. While the application still functions correctly, did anyone have the same issue? am i missing something? 😮‍💨

[vilbert]

I recently got the same error and some sources said it's because of some circular imports happening while bundling using webpack.

Anyway, my issue came from custom styled MUI components, and here's how I fixed it:

Changed import { styled } from "@mui/material"
to import { styled } from "@mui/material/styles"

Hope it helps.

[codemile]

@vilbert is correct. I had the same warnings and updated the imports to fix them. You can add an eslint import rule to catch these in the future.

[hotspoon]

based on @ticovix
I downgraded the NEXT version to 13.4.19 and the warnings stopped.

this is working for me, downgrade nextjs version from 13.5 to 13.4.19 remove the warning in terminal

[niteshsharma0304]

@codemile , If you have the es-lint rule for this, could you please share it?

[hobroker]

I wrote these and seems to find my problems

module.exports = {
  create(context) {
    return {
      ImportDeclaration(node) {
        if (node.source.value !== "@mui/material") return;

        node?.specifiers?.forEach((item) => {
          if (["styled", "useTheme"].includes(item.local.name)) {
            context.report(
              node,
              item.loc,
              `Import "${item.local.name}" from "@mui/material/styles" instead.`,
            );
          }
        });
      },
    };
  },
};

[SonNg2k]

This ESLint rule https://typescript-eslint.io/rules/no-restricted-imports/ will help u enforce this. For example:

'no-restricted-imports': 'off',
'@typescript-eslint/no-restricted-imports': [
  'error',
  {
    paths: [
      {
        name: '@mui/material',
        message:
          "Imports from '@mui/material' are not allowed, use '@mui/material/*' instead.",
      },
      {
        name: '@mui/icons-material',
        message:
          "Imports from '@mui/icons-material' are not allowed, use '@mui/icons-material/*' instead.",
      },
    ],
  },
],

[ivandax]

In my case it got fixed by changing:

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

to

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

[sai9494]

I have one doubt in mui

once use variant= standard for textfiled mui is getting any flickering issue