MUI throwing error in Nextjs

[dhavalveera]

Error:

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

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

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

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

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

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

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

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

Import trace for requested module:
__barrel_optimize__?names=Box,IconButton,Typography,styled!=!./node_modules/@mui/material/index.js
./src/components/HomePage/SubCategList/styles.tsx
./src/components/HomePage/SubCategList/index.tsx
./src/pages/index.tsx

Expected Behavior

this error shouldn't come when we're building the npm run build

Also, I've not wrapping the ThemeProvider & CssBaseline in the Nextjs v13 Pages Route _app.tsx file

Furthermore, I am using Nextjs v13 Pages Router with TypeScript.

some small example as below:

import { styled, Typography } from '@mui/material'

export const SectionHeading = styled(Typography)(({ theme }) => ({
  fontFamily: 'var(--quicksand-font)',
  fontSize: theme.typography.pxToRem(22),
  fontWeight: 600,
  lineHeight: 1.2,
  color: '#222',

  '& span': {
    color: 'var(--primary-color)',
  },
}))

and similar way I've in other files, this is the way currently I am having the MUI Design, and the components required like, Box, Container, Grid from @mui/material

Environment

npx @mui/envinfo

System:
    OS: Windows 10 10.0.22621
  Binaries:
    Node: 18.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 9.5.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.22621.2283.0), Chromium (117.0.2045.41)
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.16
    @mui/core-downloads-tracker:  5.14.10
    @mui/icons-material: ^5.14.9 => 5.14.9
    @mui/joy: ^5.0.0-beta.7 => 5.0.0-beta.7
    @mui/material: ^5.14.10 => 5.14.10
    @mui/private-theming:  5.14.10
    @mui/styled-engine:  5.14.10
    @mui/system:  5.14.10
    @mui/types:  7.2.4
    @mui/utils:  5.14.10
    @types/react: 18.2.22 => 18.2.22
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.2.2 => 5.2.2

I am using Latest & Updated CHROME Browser.

[brandon-julio-t]

Duplicate of #39093

[brijeshb42]

Just FYI, these are warnings and build should not fail with this. Also, closing as duplicate.

[dhavalveera]

I agree, that this is an Warning, and not an error n should not fail the build.

but why in the latest version of MUI this warning is thrown?

[brijeshb42]

It's actually logging warning with the latest version of next js, not with MUI. There's no warning if you use the latest 13.4.x version. So we'll have to debug if this needs to be fixed in MUI or not.

[dhavalveera]

it's the Version of Nextjs but with Pages Router, not the App Router.

and the Nextjs version I am using is 13.5.2

Yes, possible that warning is thrown by Nextjs, but something is there in MUI, because if I don't have the MUI packages, then the error is not thrown at all...

[brijeshb42]

See this comment. Also, like I earlier pointed, these are warnings and not error. So you can continue your development till this is fixed either in MUI or Next.js

[dhavalveera]

but @brijeshb42 where I am mentioning that it's an Error?

[brijeshb42]

You mentioned in your previous comment - then the error is not thrown at all...

[dhavalveera]

as nowhere I am stating that it's an error, I agreed that it's an warning, but the warning is of MUI, not of Nextjs, that's what I am conveying...

also in my above comment, I mentioned that I tried to build the nextjs without MUI then there's no warning at all, but when MUI is there, even the small code, it's giving warnings

[dhavalveera]

You mentioned in your previous comment - then the error is not thrown at all...

I'm Sorry, but it's an typo

[brijeshb42]

Can you check if you are importing useTheme anywhere in your code and what is the import path? If yes, can you update the code to import it like import { useTheme } from "@mui/material/styles"; instead of from @mui/material and see if the warning is still there.

[dhavalveera]

Can you check if you are importing useTheme anywhere in your code and what is the import path? If yes, can you update the code to import it like import { useTheme } from "@mui/material/styles"; instead of from @mui/material and see if the warning is still there.

let me try this scenario & get back to you

[dhavalveera]

@brijeshb42 -- in the currently code which I mentioned, at no where I am using the useTheme at all, but the issue is there

[dhavalveera]

Can you check if you are importing useTheme anywhere in your code and what is the import path? If yes, can you update the code to import it like import { useTheme } from "@mui/material/styles"; instead of from @mui/material and see if the warning is still there.

in other Project, I tried the way you mentioned, but still the warning is there

[dhavalveera]

and also, I am using the TypeScript with Nextjs Page Router @brijeshb42