Pigment CSS Vite example broken

[Morabotti]

Steps to reproduce

Link to live example: /examples/material-ui-pigment-css-vite-ts

Steps:

1. Follow the README instructions
2. Receive following error to the console while running npm run dev:

   Uncaught Error: @pigment-css/react: You were trying to call "generateAtomics" function without configuring your bundler. Make sure to install the bundler specific plugin and use it. @pigment-css/vite-plugin for Vite integration or @pigment-css/nextjs-plugin for Next.js integration.

Current behavior

Not working

Expected behavior

Things to work

Context

No response

Your environment

Environment

  System:
    OS: Windows 10 10.0.19045
  Binaries:
    Node: 20.9.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.4.1 - ~\AppData\Roaming\npm\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: 128.0.6613.84
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react:  11.13.3
    @emotion/styled:  11.13.0
    @mui/core-downloads-tracker:  6.0.0
    @mui/material: next => 6.0.0-rc.0
    @mui/material-pigment-css: next => 6.0.0-rc.0
    @mui/private-theming:  6.0.0-rc.0
    @mui/styled-engine:  6.0.0-rc.0
    @mui/system:  6.0.0-rc.0
    @mui/types:  7.2.16
    @mui/utils:  6.0.0-rc.0
    @pigment-css/react:  0.0.20
    @pigment-css/vite-plugin: latest => 0.0.20
    @types/react: latest => 18.3.4
    react: latest => 18.3.1
    react-dom: latest => 18.3.1
    typescript: latest => 5.5.4

Search keywords: vite, pigment-css

[mnajdova]

Thanks for the report. I am updating all examples in https://github.com/mui/material-ui/pull/43494 to use the latest tag instead of next. Using these versions the project runs successfully. These are the versions I ended up with:

  System:
    OS: macOS 14.1.2
  Binaries:
    Node: 20.15.0 - ~/.nvm/versions/node/v20.15.0/bin/node
    npm: 10.7.0 - ~/.nvm/versions/node/v20.15.0/bin/npm
    pnpm: 9.7.1 - ~/.nvm/versions/node/v20.15.0/bin/pnpm
  Browsers:
    Chrome: 128.0.6613.85
    Edge: Not Found
    Safari: 17.1.2
  npmPackages:
    @emotion/react:  11.13.3 
    @emotion/styled:  11.13.0 
    @mui/core-downloads-tracker:  6.0.0 
    @mui/material: latest => 6.0.0 
    @mui/material-pigment-css: latest => 6.0.0 
    @mui/private-theming:  6.0.0 
    @mui/styled-engine:  6.0.0 
    @mui/system:  6.0.0 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.0 
    @pigment-css/react:  0.0.20 
    @pigment-css/vite-plugin: latest => 0.0.20 
    @types/react: latest => 18.3.4 
    react: latest => 18.3.1 
    react-dom: latest => 18.3.1 
    typescript: latest => 5.5.4 

Can you verify that it works when using the latest tag for all @mui/* dependencies?

[Morabotti]

That does not fix the issue for me. Tested with npm run dev and npm run build && npm run preview. Same problem:

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react:  11.13.3
    @emotion/styled:  11.13.0
    @mui/core-downloads-tracker:  6.0.0
    @mui/material: latest => 6.0.0
    @mui/material-pigment-css: latest => 6.0.0
    @mui/private-theming:  6.0.0
    @mui/styled-engine:  6.0.0
    @mui/system:  6.0.0
    @mui/types:  7.2.16
    @mui/utils:  6.0.0
    @pigment-css/react:  0.0.20
    @pigment-css/vite-plugin: latest => 0.0.20
    @types/react: latest => 18.3.4
    react: latest => 18.3.1
    react-dom: latest => 18.3.1
    typescript: latest => 5.5.4

Note that the npm run build does not work out of the box either because of the tsc check. It results the following "error":

> tsc -b

src/App.tsx:1:1 - error TS6133: 'React' is declared but its value is never read.

1 import * as React from 'react';
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Found 1 error.

[mnajdova]

Can you please share your repo? Or just create a GitHub repository as a minimal reproduction.

I noticed the TS error, we can fix it separately.

[Morabotti]

This is basically a duplicate from the example project. Steps to reproduce:

1. Clone the repo
2. npm install
3. npm run dev

I've reproduced this on two machines, Windows 10 and Windows 11. Only tested with npm and Node 20.

[mnajdova]

I was testing on MacOS, sorry. I was able to reproduce on Windows. We'll look into it.

[brijeshb42]

Let me check this on a Windows machine if I can find it. We recently fixed this issue in general (atleast I thought I did). So seems related to that except some OS specific thing that needs to be handled as well.

[mnajdova]

@Morabotti the issue has been fixed in https://github.com/mui/pigment-css/pull/218, it will be released in "0.0.22" (both for the vite and nextjs plugins). If you want to try it locally before it, you can use this package version:

{
  "@pigment-css/vite-plugin": "https://pkg.csb.dev/mui/pigment-css/commit/9462e64b/@pigment-css/vite-plugin"
}

[Morabotti]

This fixed the issue. Thanks.

[github-actions[bot]]

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] We value your feedback @Morabotti! How was your experience with our support team? If you could spare a moment, we'd love to hear your thoughts in this brief Support Satisfaction survey. Your insights help us improve!