Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Build warnings with Material UI - barrel_optimize #39093

Closed
yelodevopsi opened this issue Sep 21, 2023 · 6 comments
Closed

Build warnings with Material UI - barrel_optimize #39093

yelodevopsi opened this issue Sep 21, 2023 · 6 comments
Assignees
Labels
package: material-ui Specific to @mui/material

Comments

@yelodevopsi
Copy link

yelodevopsi commented Sep 21, 2023

Steps to reproduce 🕹

Link to live example:

Steps:

  1. Install latest Material UI with next.js
  2. import { styled } from "@mui/material";
  3. Errors will show in console when yarn dev

Current behavior 😯

Tons of error miessages:

⚠ 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

Expected behavior 🤔

No errors.

Context 🔦

The errors is clearly described an suggestions have come in:
vercel/next.js#55663

Your environment 🌎

npx @mui/envinfo
Chrome: Version 117.0.5938.88 (Official Build) (arm64)
  
    System:
    OS: macOS 13.5.1
  Binaries:
    Node: 16.20.2 - ~/.nvm/versions/node/v16.20.2/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.2/bin/yarn
    npm: 8.19.4 - ~/.nvm/versions/node/v16.20.2/bin/npm
  Browsers:
    Chrome: 117.0.5938.88
    Edge: Not Found
    Safari: 16.6
  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/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.21 => 18.2.21 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: 5.2.2 => 5.2.2 
@yelodevopsi yelodevopsi added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 21, 2023
@zannager zannager added the package: system Specific to @mui/system label Sep 21, 2023
@Semkoo
Copy link

Semkoo commented Sep 22, 2023

I too have been seeing this error

@oliviertassinari oliviertassinari changed the title Build warnings with MUI - barrel_optimize Build warnings with Material UI - barrel_optimize Sep 29, 2023
@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 29, 2023

Left an idea in vercel/next.js#55663 (comment).

@oliviertassinari oliviertassinari added package: material-ui Specific to @mui/material and removed package: system Specific to @mui/system labels Sep 29, 2023
@brandon-julio-t
Copy link

I think Next.js has solved this issue in their latest canary release (source).

@Semkoo
Copy link

Semkoo commented Oct 9, 2023

I think Next.js has solved this issue in their latest canary release (source).

Just tested and it the error is gone

package.json
....
"next": "^13.5.5-canary.4",
....

@brijeshb42
Copy link
Contributor

Closing as the fix has been made in next.js

@zannager zannager removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Oct 10, 2023
@MichaelCurrie
Copy link

MichaelCurrie commented Aug 11, 2024

I have this issue, even though my next.js version is 14.2.5.

The underlying cause seems to definitely be something in mui that is conflicting during a star * import clashing with __esModule.

alan2207/bulletproof-react#124 (comment)

vercel/next.js#55663

In our case it was the DataGrid component. It appears that when barrel_optimize tries to search ?names=DataGrid&wildcard!=!./CssBaseline there are two items that come up with the same name.

To fix, we had to change our import from

import { TextField, Toolbar, Grid, DataGrid } from '@mui/material';

to

import { TextField, Toolbar, Grid } from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';

Also, we needed to add @mui/x-data-grid to package.json by running npm install @mui/x-data-grid (see https://stackoverflow.com/a/71522449/1832942).

For some reason, this prevents the warnings below.

#103 RUN npm run build
#103 0.552
#103 0.552 > [email protected] build
#103 0.552 > next build
#103 0.552
#103 1.434 Attention: Next.js now collects completely anonymous telemetry regarding usage.
#103 1.434 This information is used to shape Next.js' roadmap and prioritize features.
#103 1.434 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
#103 1.434 https://nextjs.org/telemetry
#103 1.435
#103 1.555   ▲ Next.js 14.2.5
#103 21.75  ⚠ Compiled with warnings
#103 21.75
#103 21.75 __barrel_optimize__?names=DataGrid,Grid,TextField,Toolbar!=!./node_modules/@mui/material/index.js
#103 21.75 The requested module '__barrel_optimize__?names=DataGrid&wildcard!=!./CssBaseline' contains conflicting star exports for the name '__esModule' with the previous requested module '__barrel_optimize__?names=DataGrid&wildcard!=!./utils'
#103 21.75
#103 21.75 Import trace for requested module:
#103 21.75 __barrel_optimize__?names=DataGrid,Grid,TextField,Toolbar!=!./node_modules/@mui/material/index.js

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: material-ui Specific to @mui/material
Projects
None yet
Development

No branches or pull requests

7 participants