mui / pigment-css

Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.
MIT License
812 stars 39 forks source link

Issue with @mui/utils package dependency #309

Open paulm17 opened 1 week ago

paulm17 commented 1 week ago

Steps to reproduce

Build a package using @pigment/css react and use rollup.

Current behavior

Without the vite sidestep. I get the following issues:

Uncaught SyntaxError: The requested module 'node_modules/prop-types/index.js' does not provide an export named 'default' (at elementAcceptingRef.js:1:8)

Uncaught SyntaxError: The requested module 'node_modules/react-is/index.js' does not provide an export named 'ForwardRef' (at getDisplayName.js:1:10)

relevant links: https://stackoverflow.com/a/44868718/439750 https://github.com/mui/material-ui/issues/18791 https://github.com/react-component/util/issues/105

Expected behavior

These issues should not exist.

Context

I'm using pigment-css as part of a custom UI library. With tsup this issue isn't present. However using rollup it is.

To sidestep the issue, I have added the following to my vite config:

optimizeDeps: {
    include: ['prop-types', 'react-is'],
  },
  resolve: {
    alias: {
      'prop-types': 'prop-types/prop-types.js',
      'react-is': 'react-is/cjs/react-is.development.js',
    },
  },

Search keywords: vite build

brijeshb42 commented 5 days ago

This is a known issue (mainly with Vite and indirectly Rollup) and will be fixed when we have the stable release (when we remove prop-types usage).