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

[TongChia]

• The issue is present in the latest release.
• 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\[email protected]\@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 #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 FredKSchott/snowpack#3206 which looks very similar.

[oliviertassinari]

It reminds me the ESM issue that Vite had: #21377