FredKSchott / snowpack

ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️
https://www.snowpack.dev
MIT License
19.48k stars 922 forks source link

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

Open TongChia opened 3 years ago

TongChia commented 3 years ago

Quick checklist

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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

I can confirm @TongChia worked for me on 3.8.8.

TongChia commented 3 years ago

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 commented 2 years ago

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.