🐛 BUG: not work with @mui/material ( @material-ui v5 )

[TongChia]

Quick checklist

• [X] I am using the latest version of Snowpack and all plugins.

What package manager are you using?

yarn

What operating system are you using?

macOS, Linux

Describe the bug

a strange error when snowpack dev whith @mui/material (or @material-ui/core v5)

my app.tsx like:

import { h } from 'preact';
import './App.css';
// import { useState, useEffect } from 'preact/hooks';
// import logo from './logo.svg';
// import { makeStyles } from '@mui/styles';
// import { ThemeProvider } from '@mui/material/styles';
import { Button } from '@mui/material';

function App() {
  return (
    <Button>Hello !</Button>
  )
}

i got error message The requested module '/_snowpack/pkg/@mui.core.ModalUnstyled.v5.0.0-alpha.47.js' does not provide an export named 'SliderMark'

check this file node_modules/.cache/snowpack/build/@mui/material@5.0.0/@mui/material.js MUI components export from '@mui/core/ModalUnstyled' 😱

export {  SliderMark,  SliderMarkLabel,  SliderRail, ................ } from '@mui/core/ModalUnstyled';

is that a esbuild bug ?

i can fix it with

import Button from '@mui/material/Button';

Steps to reproduce

1. npx create-snowpack-app using template app-template-preact-typescript
2. yarn add @mui/material @emotion/react @emotion/styled
3. add @mui component to App.tsx import { Typography } from "@mui/material"
4. yarn start
5. error: The requested module '/_snowpack/pkg/@mui.core.ModalUnstyled.v5.0.0-alpha.47.js' does not provide an export named 'SliderMark'

Link to minimal reproducible example (optional)

No response

[GoldenTK]

I also still have this problem? Why it's not working??

Uncaught SyntaxError: The requested module '/_snowpack/pkg/@mui.core.ModalUnstyled.v5.0.0-alpha.48.js' does not provide an export named 'SliderMark'

[TongChia]

I also still have this problem? Why it's not working??

Uncaught SyntaxError: The requested module '/_snowpack/pkg/@mui.core.ModalUnstyled.v5.0.0-alpha.48.js' does not provide an export named 'SliderMark'

I think this is caused by "circular references" i can fix it now ↓ edit node_modules/@mui/material/Modal/Modal.js

// import ModalUnstyled, { modalUnstyledClasses } from '@mui/core/ModalUnstyled';
import { ModalUnstyled, modalUnstyledClasses } from '@mui/core';

and node_modules/@mui/material/Modal/index.js

// export * from '@mui/core/ModalUnstyled';
export { ModalUnstyled, ModalManager, modalUnstyledClasses, getModalUtilityClass } from '@mui/core';

and clean cache

rm -rf node_modules/.cache

[httpete]

I can confirm @TongChia worked for me on 3.8.8.

[TongChia]

Simple way to solve the problem : in my code ↓

// import Modal from '@mui/material/Modal';
import Modal from '@mui/material/Modal/Modal';   // skip index  😄

snowpack version 3.8.8 reference: https://github.com/TongChia/Caddy-Proxy-Manager/blob/fafdca9a2ece008de4ea01f947867ae34d08ee6b/src/components/MyDialog.tsx#L2

[dieuwedeboer]

I had a similar issue here with Snowpack 3.8.8 the error I was getting was:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of `ForwardRef(Modal)`.

But as it was showing up when importing Select, I just replaced import Select from '@mui/material/Select' with import Select from '@mui/material/Select/Select'

Not an ideal solution and I noticed a bit of visual degradation using the component that way, but one can always manually tweak a few styles or include missing classes directly.