Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
Methuselah96 opened this issue Sep 5, 2024 · 7 comments
Closed

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

Methuselah96 opened this issue Sep 5, 2024 · 7 comments
Assignees
@siriwatknp
Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation package: pigment-css Specific to @pigment-css/*

Comments

@Methuselah96
Copy link
Contributor

Methuselah96 commented Sep 5, 2024 •
edited by github-actions bot
Loading

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
@Methuselah96 Methuselah96 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 5, 2024
@mnajdova
Copy link
Member

mnajdova commented Sep 5, 2024

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

@zannager zannager added the package: pigment-css Specific to @pigment-css/* label Sep 5, 2024
@Methuselah96
Copy link
Contributor Author

Methuselah96 commented Sep 5, 2024 •
edited
Loading

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 brijeshb42 added the docs Improvements or additions to the documentation label Sep 5, 2024
@brijeshb42
Copy link
Contributor

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

@Methuselah96 Methuselah96 changed the title Input components fail to build with Pigment CSS Input components fail to build with Pigment CSS without cssVariables Sep 5, 2024
@siriwatknp
Copy link
Member

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

@brijeshb42
Copy link
Contributor

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 siriwatknp added bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 11, 2024
@siriwatknp siriwatknp mentioned this issue Sep 11, 2024
Merged
1 task
@DiegoAndai DiegoAndai moved this to In progress in Material UI Sep 11, 2024
@siriwatknp
Copy link
Member

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-project-automation github-project-automation bot moved this from In progress to Done in Material UI Oct 21, 2024
@github-actions GitHub Actions
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
bug 🐛 Something doesn't work docs Improvements or additions to the documentation package: pigment-css Specific to @pigment-css/*
Projects
Material UI
Status: Done
Milestone
No milestone
Development

No branches or pull requests
5 participants
@Methuselah96 @brijeshb42 @mnajdova @siriwatknp @zannager