Vite + TypeScript + @pigment-css/vite-plugin requires transformed @mui/material as dependency to function

[inimicus]

Steps to reproduce

1. Obtain and run demo:

   curl https://codeload.github.com/mui/pigment-css/tar.gz/master | tar -xz --strip=2 pigment-css-master/examples/pigment-css-vite-ts
   cd pigment-css-vite-ts
   npm install
   npm run dev

2. Load local, as directed by vite (e.g. http://localhost:5173)
3. Observe page not loading, SyntaxError: Importing binding name 'default' cannot be resolved by star export entries. in console
4. Add @mui/material dependency

   npm i --save @mui/material@latest

5. Update vite.config.ts to include transformLibraries option for @mui/material:

   export default defineConfig({
     plugins: [
       pigment({
         theme,
   +     transformLibraries: ["@mui/material"],
       }),
       react(),
     ],
   });
   

6. Observe local now working, no SyntaxError present

Current behavior

Using Vite + React + TypeScript with only @pigment-css/vite-plugin fails to load with error SyntaxError: Importing binding name 'default' cannot be resolved by star export entries. until @mui/material is added to deps and transformLibraries vite.config.ts option.

Expected behavior

Local should load without error.

Context

Ran into the issue when I manually added pigment to a fresh Vite project. After some debugging and testing example projects, found that the example in this repo is broken, but the one in mui/material is not. After some investigation, discovered the dependency and transform differences and applying the changes fixed both my project and the example.

Is this is a new dependency and examples docs are out of date or is this an unintended side-effect of some updates. Perhaps related to @mui/* internal references as noted here?

Your environment

npx @mui/envinfo

  System:
    OS: macOS 15.0.1
  Binaries:
    Node: 22.10.0 - /opt/homebrew/bin/node
    npm: 10.9.0 - /opt/homebrew/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 130.0.6723.70
    Edge: Not Found
    Safari - Used to test: 18.0.1
  npmPackages:
    @emotion/react:  11.13.3
    @emotion/styled:  11.13.0
    @mui/core-downloads-tracker:  6.1.5
    @mui/material: ^6.1.5 => 6.1.5
    @mui/private-theming:  6.1.5
    @mui/styled-engine:  6.1.5
    @mui/system:  6.1.5
    @mui/types:  7.2.18
    @mui/utils:  6.1.5
    @pigment-css/react: latest => 0.0.25
    @pigment-css/vite-plugin: latest => 0.0.25
    @types/react: latest => 18.3.12
    react: latest => 18.3.1
    react-dom: latest => 18.3.1
    typescript: latest => 5.6.3

Search keywords: vite typescript react vite-plugin

[sergio-garkusha]

I encountered the same issue, and following these steps resolved it for me as well. Thank you, @inimicus, for discovering and sharing this solution! Adding @mui/material and updating vite.config.ts with the transformLibraries option got my project up and running without errors. It would be great if the documentation could reflect this workaround, or if there’s an update on handling this dependency.

Thanks to the pigment-css team for their work on this tool—looking forward to seeing how this evolves!

[brijeshb42]

Updated the example. The fix was to also add prop-types and react-is to the deps and add it to optimizeDeps.include array for the time being.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@inimicus How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.