search

mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.89k stars 32.26k forks source link

Input components fail to build with Pigment CSS without `cssVariables` #43615

Closed Methuselah96 closed 2 weeks ago

Methuselah96 commented 2 months ago

Steps to reproduce

Link to live example: https://stackblitz.com/edit/github-gwqtwf?file=src%2FApp.tsx,vite.config.ts

Note that this only happens if cssVariables is not set within createTheme in vite.config.ts.

Current behavior

The build crashes with these errors:

11:04:07 PM [vite] Pre-transform error: C:\Users\nbier\Documents\mui-pigment-css\node_modules\@mui\material\FilledInput\FilledInput.js: Cannot convert undefined or null to object
11:04:08 PM [vite] Pre-transform error: C:\Users\nbier\Documents\mui-pigment-css\node_modules\@mui\material\OutlinedInput\OutlinedInput.js: Cannot convert undefined or null to object
11:04:25 PM [vite] Internal server error: C:\Users\nbier\Documents\mui-pigment-css\node_modules\@mui\material\FilledInput\FilledInput.js: Cannot convert undefined or null to object
  Plugin: vite-plugin-zero-runtime
  File: C:/Users/nbier/Documents/mui-pigment-css/node_modules/@mui/material/FilledInput/FilledInput.js?v=fc4f365d
      at Function.keys (<anonymous>)
      at iterateAndReplaceFunctions (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:138:10)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:142:9
      at Array.forEach (<anonymous>)
      at iterateAndReplaceFunctions (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:138:21)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:142:9
      at Array.forEach (<anonymous>)
      at iterateAndReplaceFunctions (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:138:21)
      at Object.cssFnValueToVariable (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:196:3)
      at StyledProcessor.processCss (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:385:34)
      at StyledProcessor.processStyle (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:306:31)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:209:12
      at Array.forEach (<anonymous>)
      at StyledProcessor.build (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:208:20)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:26:17
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\getTagProcessor.js:384:5
      at Array.forEach (<anonymous>)
      at applyProcessors (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\getTagProcessor.js:375:10)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:25:42
      at EventEmitter.perf (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\EventEmitter.js:45:20)
      at collector (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:24:16)
      at PluginPass.pre (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:51:26)
      at transformFile (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transformation\index.js:73:27)
      at transformFile.next (<anonymous>)
      at run (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transformation\index.js:24:12)
      at run.next (<anonymous>)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transform-ast.js:23:33
      at Generator.next (<anonymous>)
      at evaluateSync (C:\Users\nbier\Documents\mui-pigment-css\node_modules\gensync\index.js:251:28)
      at sync (C:\Users\nbier\Documents\mui-pigment-css\node_modules\gensync\index.js:89:14)
      at stopHiding - secret - don't use this - v1 (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\errors\rewrite-stack-trace.js:47:12)
      at Object.transformFromAstSync (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transform-ast.js:43:83)
      at BaseAction.collect (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\generators\collect.js:50:24)
      at collect.next (<anonymous>)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:66:78
      at EventEmitter.action (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\EventEmitter.js:25:22)
      at BaseAction.emitAction (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:131:39)
      at nextFn (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:66:32)
      at processNext (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:111:28)
      at Object.next (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:120:9)
      at asyncActionRunner (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\actionRunner.js:39:102)
      at asyncActionRunner (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\actionRunner.js:46:28)
      at async Object.transform (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform.js:107:20)
      at async TransformPluginContext.transform (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\vite-plugin\build\index.js:169:24)
      at async PluginContainer.transform (file:///C:/Users/nbier/Documents/mui-pigment-css/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49000:18)
      at async loadAndTransform (file:///C:/Users/nbier/Documents/mui-pigment-css/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51822:27)
      at async viteTransformMiddleware (file:///C:/Users/nbier/Documents/mui-pigment-css/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:61776:24)
11:04:26 PM [vite] Internal server error: C:\Users\nbier\Documents\mui-pigment-css\node_modules\@mui\material\OutlinedInput\OutlinedInput.js: Cannot convert undefined or null to object
  Plugin: vite-plugin-zero-runtime
  File: C:/Users/nbier/Documents/mui-pigment-css/node_modules/@mui/material/OutlinedInput/OutlinedInput.js?v=fc4f365d
      at Function.keys (<anonymous>)
      at iterateAndReplaceFunctions (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:138:10)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:142:9
      at Array.forEach (<anonymous>)
      at iterateAndReplaceFunctions (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:138:21)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:142:9
      at Array.forEach (<anonymous>)
      at iterateAndReplaceFunctions (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:138:21)
      at Object.cssFnValueToVariable (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\chunk-T7JJK7TQ.js:196:3)
      at StyledProcessor.processCss (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:385:34)
      at StyledProcessor.processStyle (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:306:31)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:209:12
      at Array.forEach (<anonymous>)
      at StyledProcessor.build (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\react\processors\styled.js:208:20)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:26:17
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\getTagProcessor.js:384:5
      at Array.forEach (<anonymous>)
      at applyProcessors (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\getTagProcessor.js:375:10)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:25:42
      at EventEmitter.perf (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\EventEmitter.js:45:20)
      at collector (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:24:16)
      at PluginPass.pre (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\plugins\collector.js:51:26)
      at transformFile (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transformation\index.js:73:27)
      at transformFile.next (<anonymous>)
      at run (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transformation\index.js:24:12)
      at run.next (<anonymous>)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transform-ast.js:23:33
      at Generator.next (<anonymous>)
      at evaluateSync (C:\Users\nbier\Documents\mui-pigment-css\node_modules\gensync\index.js:251:28)
      at sync (C:\Users\nbier\Documents\mui-pigment-css\node_modules\gensync\index.js:89:14)
      at stopHiding - secret - don't use this - v1 (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\errors\rewrite-stack-trace.js:47:12)
      at Object.transformFromAstSync (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@babel\core\lib\transform-ast.js:43:83)
      at BaseAction.collect (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\generators\collect.js:50:24)
      at collect.next (<anonymous>)
      at C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:66:78
      at EventEmitter.action (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\utils\EventEmitter.js:25:22)
      at BaseAction.emitAction (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:131:39)
      at nextFn (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:66:32)
      at processNext (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:111:28)
      at Object.next (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\BaseAction.js:120:9)
      at asyncActionRunner (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\actionRunner.js:39:102)
      at asyncActionRunner (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform\actions\actionRunner.js:46:28)
      at async Object.transform (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@wyw-in-js\transform\lib\transform.js:107:20)
      at async TransformPluginContext.transform (C:\Users\nbier\Documents\mui-pigment-css\node_modules\@pigment-css\vite-plugin\build\index.js:169:24)
      at async PluginContainer.transform (file:///C:/Users/nbier/Documents/mui-pigment-css/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:49000:18)
      at async loadAndTransform (file:///C:/Users/nbier/Documents/mui-pigment-css/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:51822:27)
      at async viteTransformMiddleware (file:///C:/Users/nbier/Documents/mui-pigment-css/node_modules/vite/dist/node/chunks/dep-BzOvws4Y.js:61776:24)

Expected behavior

Everything works

Context

I am experimenting with migrating to Pigment CSS using the migration guide and ran into these errors. I can fix it by adding cssVariables: true in createTheme in vite.config.ts, but I did not see that mentioned in the migration guide, so I'm assuming this is a bug.

Your environment

npx @mui/envinfo ``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.11.1 - C:\Program Files\nodejs\node.EXE npm: 10.2.4 - C:\Program Files\nodejs\npm.CMD pnpm: 9.9.0 - C:\Program Files\nodejs\pnpm.CMD Browsers: Chrome: Not Found Edge: Chromium (127.0.2651.74) ```

Search keywords: filledinput outlinedinput pigment css

mnajdova commented 2 months ago

This is expected, Pigment CSS only has access to the CSS vars, this is how it's possible not to depend on context for the theme. @brijeshb42 correct me if I am wrong please.

We should likely point this out in the migration guide tough @siriwatknp

Methuselah96 commented 2 months ago

Sounds good, I wasn't sure if it was a bug or just something missing in the migration guide. It took a few hours to figure out what was going on though, so I'm sure others would appreciate it getting added to the migration guide. I couldn't figure out what the issue was until I took a look at the example project in examples/material-ui-pigment-css-vite-ts.

brijeshb42 commented 2 months ago

Yes. It is expected. Thanks for flagging @Methuselah96. We'll get it added to the docs.

siriwatknp commented 1 month ago

@brijeshb42 This is strange. I'd expect it to work without CSS variables.

brijeshb42 commented 1 month ago

So the issue here seems to be more than the null value. I was able to fix the issue with null but then, I am facing other issues related to using the theme during runtime, mainly useTheme() calls. I'll post an update when I have a fix.

siriwatknp commented 2 weeks ago

I tested the provided sandbox with the latest version of Pigment CSS and Material UI, it project works fine so this issue is closed.

github-actions[bot] commented 2 weeks ago

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] @Methuselah96 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.