It prompts that "Uncaught SyntaxError" when using Pigment css v0.0.17 and vite.

[yosipy]

Steps to reproduce

1. Clone Pigment CSS - Vite with TypeScript example project
2. Change the versions of "@pigment-css/react" and "@pigment-css/vite-plugin" to 0.0.17

   --- a/vite_offi/package.json
   +++ b/vite_offi/package.json
   @@ -9,12 +9,12 @@
       "preview": "vite preview"
     },
     "dependencies": {
   -    "@pigment-css/react": "latest",
   +    "@pigment-css/react": "0.0.17",
       "react": "latest",
       "react-dom": "latest"
     },
     "devDependencies": {
   -    "@pigment-css/vite-plugin": "latest",
   +    "@pigment-css/vite-plugin": "0.0.17",

3. Install it and run:

   npm install
   npm run dev

4. Access http://localhost:5173/ in your browser

Current behavior

The following error is displayed in the console:

elementAcceptingRef.js?v=80790d52:1 

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

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

I use Chrome as my browser. Chrome v126.0.6478.127（Official Build）（64bit） I am using wsl2 and Docker compose on Windows 11. ``` # npx @mui/envinfo Need to install the following packages: @mui/envinfo@2.0.19 Ok to proceed? (y) y System: OS: Linux 5.15 Debian GNU/Linux 12 (bookworm) 12 (bookworm) Binaries: Node: 18.18.0 - /usr/local/bin/node npm: 9.8.1 - /usr/local/bin/npm pnpm: Not Found Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.11.4 @emotion/styled: 11.11.5 @mui/private-theming: 6.0.0-dev.20240529-082515-213b5e33ab @mui/styled-engine: 6.0.0-dev.20240529-082515-213b5e33ab @mui/system: 6.0.0-dev.240424162023-9968b4889d @mui/types: 7.2.15 @mui/utils: 6.0.0-dev.20240529-082515-213b5e33ab @types/react: latest => 18.3.3 react: latest => 18.3.1 react-dom: latest => 18.3.1 typescript: latest => 5.5.3 ```

Search keywords: Uncaught SyntaxError,0.0.17,vite

[yosipy]

No error occurred in pigment-css v0.0.16.

[yosipy]

I solved it by passing the option referring to the following PR: https://github.com/mui/pigment-css/pull/172

--- a/vite_offi/vite.config.ts
+++ b/vite_offi/vite.config.ts
@@ -26,6 +26,9 @@ const theme = extendTheme({

 // https://vitejs.dev/config/
 export default defineConfig({
+  optimizeDeps: {
+    include: ["prop-types", "react-is"],
+  },
   plugins: [
     pigment({
       theme,

https://ja.vitejs.dev/config/dep-optimization-options#optimizedeps-include

Examples and documentation updates are needed in the mui/material-ui and mui/pigment-css repositories.

[brijeshb42]

We are still working on Pigment CSS's documentation. We'll track this for that.

[rossipedia]

FWIW this did not work for me: https://github.com/rossipedia/pigment-vite-playground

Just trying to follow the basic Pigment integration docs. My repo doesn't have prop-types or react-is as a dependency, so I get this message in console when running vite when I use @yosipy's solution:

Failed to resolve dependency: prop-types, present in 'optimizeDeps.include'
Failed to resolve dependency: react-is, present in 'optimizeDeps.include'

And then I get the same error described in the original issue

[corydeppen]

The Pigment CSS - Vite with TypeScript example project with @yosipy's solution seems to run as expected using npm, but it doesn't run using pnpm. I didn't see an issue mentioning it, so I was wondering whether it's a confirmed issue and/or known limitation at this point.