Compilation error caused by "circular reference" (@mui/core, @mui/core/ModalUnstyled)

[TongChia]

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

try to build with snowpack (esbuild) got error: The requested module '/_snowpack/pkg/@mui.core.ModalUnstyled.v5.0.0-alpha.47.js' does not provide an export named 'SliderMark' bug describe

Expected Behavior 🤔

Steps to Reproduce 🕹

Steps:

1. npx create-snowpack-app --template @snowpack/app-template-preact-typescript --use-yarn
2. yarn add @mui/material @emotion/react @emotion/styled
3. add @mui component to App.tsx import { Typography } from "@mui/material"
4. yarn start

Context 🔦

temporary solution

Your Environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 11.6 Binaries: Node: 16.3.0 - ~/.nodenv/versions/16.3.0/bin/node Yarn: 1.22.10 - ~/.nodenv/versions/16.3.0/bin/yarn npm: 7.20.0 - ~/.nodenv/versions/16.3.0/bin/npm Browsers: Chrome: 93.0.4577.82 Edge: Not Found Firefox: Not Found Safari: 15.0 npmPackages: @emotion/react: ^11.4.1 => 11.4.1 @emotion/styled: ^11.3.0 => 11.3.0 @mui/core: 5.0.0-alpha.47 @mui/material: ^5.0.0 => 5.0.0 @mui/private-theming: 5.0.0 @mui/styled-engine: 5.0.0 @mui/styles: ^5.0.0 => 5.0.0 @mui/system: 5.0.0 @mui/types: 7.0.0 @mui/utils: 5.0.0 @types/react: 17.0.21 typescript: ^4.4.3 => 4.4.3 ```

[michaldudak]

Hi @TongChia. I tried to reproduce the error by following the steps you provided, but I got another error: [snowpack] Package "react" not found. Have you installed it?. Could you please provide more detailed steps? Or, even better, set up a repo I could clone?

[TongChia]

Hi @TongChia. I tried to reproduce the error by following the steps you provided, but I got another error: [snowpack] Package "react" not found. Have you installed it?. Could you please provide more detailed steps? Or, even better, set up a repo I could clone?

Thanks Reply 😄 my steps miss this

https://github.com/TongChia/mui-bug-report

[michaldudak]

OK, thanks. I was able to reproduce it, I'll investigate what may be the cause of this.

[michaldudak]

The node_modules\.cache\snowpack\build\@mui\material@5.0.1\@mui\material.js from your repo indeed looks messed up. I haven't found, however, anything suspicious in the bundle we produce.

@eps1lon would you mind taking a look at this? Perhaps you'll have a clue what's going on.

[Janpot]

I've been investigating a little bit in this. I noticed the following For any of the subpath imports (e.g. @mui/material/Button) snowpack resolves to the commonjs version of our module and then converts that to ESM. At first I thought this was the issue since statically analysing commonjs modules to find all exports doesn't work in 100% of the cases. I converted our packages to ESM in https://github.com/mui-org/material-ui/pull/30510 and tested your reproduction with this version. That solved the module resolution problem in snowpack, but still it complained about missing exports. So this was a dead end as far as this issue goes.

Inspecting the compiled module I see following exports:

export * from '/_snowpack/pkg/@mui.base.ClickAwayListener.v5.0.0-alpha.63.js';
export { default as ClickAwayListener, FormLabelRoot, SliderMark, SliderMarkLabel, SliderRail, ... } from '/_snowpack/pkg/@mui.base.ClickAwayListener.v5.0.0-alpha.63.js';

It looks to me like an issue with snowpack and its rollup configuration. I also found https://github.com/withastro/snowpack/issues/3206 which looks very similar.

[oliviertassinari]

It reminds me the ESM issue that Vite had: https://github.com/mui-org/material-ui/issues/21377