sx showing as [object Object] in the DOM

[joebochill]

Steps to reproduce

Steps:

1. create a new Vite project: yarn create vite myapp --template react-ts
2. Follow the install instructions in Readme
3. Try to render a <div> with sx property, e.g.: <div sx={{color: 'red'}}/>

Link to repro: https://github.com/joebochill/pigmentcsstest

git clone https://github.com/joebochill/pigmentcsstest
cd pigmentcsstest
yarn && yarn dev

Current behavior

The sx prop is not getting converted into className/style. It is rendering in the DOM as [object Object]:

Expected behavior

The sx prop should be converted to className/style and the styles should be applied to the element.

Context

I am just experimenting with PigmentCSS and seeing how it works.

Initially, I was having the same issue defined here about prop-types, but was able to get past that by updating the vite config:
#176

Your environment

npx @mui/envinfo

Testing on Chrome Version 131.0.6778.86

  System:
    OS: macOS 14.6.1
  Binaries:
    Node: 22.12.0 - /usr/local/bin/node
    npm: 10.9.0 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: 131.0.6778.87
    Edge: Not Found
    Safari: 17.6
  npmPackages:
    @emotion/react:  11.13.5 
    @emotion/styled:  11.13.5 
    @mui/base: ^5.0.0-beta.64 => 5.0.0-beta.64 
    @mui/private-theming:  6.1.10 
    @mui/styled-engine:  6.1.10 
    @mui/system:  6.1.10 
    @mui/types:  7.2.19 
    @mui/utils:  6.1.10 
    @pigment-css/react: ^0.0.28 => 0.0.28 
    @pigment-css/vite-plugin: ^0.0.28 => 0.0.28 
    @types/react: ^18.3.12 => 18.3.13 
    react: ^18.3.1 => 18.3.1 
    react-dom: ^18.3.1 => 18.3.1 
    typescript: ~5.6.2 => 5.6.3

Search keywords: sx object native element

[mnajdova]

Can you please share a simple reproduction, or a link to a repo that we can check?

[joebochill]

Can you please share a simple reproduction, or a link to a repo that we can check?

I updated the description with a link to a repro

[joebochill]

I started experimenting with some of the other styling options (css) and it's looking like it's maybe a more general issue with the vite plugin. I get an error in the console saying the plugin is not configured, despite following (and double checking) the instructions:

Uncaught Error: @pigment-css/react: You were trying to call "css" 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.

May be related to this issue which appears to have reappeared as of yesterday: mui/material-ui#43487 (comment)

FWIW, it's working exactly as expected in a new NextJS project.

[brijeshb42]

Just tried this locally and worked as expected.

[joebochill]

Well that's somewhat promising...it looks like the project is at least configured correctly.
It's still not working for me though. Could it possibly be an issue with running it on Mac/Linux (maybe a file path '\' versus '/' somewhere?) or a node version issue maybe?

[brijeshb42]

Could you share the whole error log (if any) ?

[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

@joebochill 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.

[joebochill]

I don't see any errors at all on my end when trying to use the sx prop...it just doesn't work.
If I try to use the css() function to create a class, then I get this console error (using the same project repo shared above):

[brijeshb42]

It should not make any difference but i was using pnpm since that's what I already had.

[brijeshb42]

Here's the same project on Stackblitz. In your case, it seems like the plugin is not configured at all. Only then the above error message comes.

[joebochill]

Interestingly enough, I deleted my yarn.lock file and reinstalled dependencies. Now it's working.

If it helps anyone else, here's a list of potentially relevant packages that got a version bump in the new lock file:

• @babel/traverse
• @emotion/cache
• @emotion/react
• @emotion/styled
• @emotion/use-insertion-effect-with-fallbacks
• @types/prop-types
• @types/react-dom
• @types/react

In any event, it seems to be working after updating the dependencies. Thanks for your help.

[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

@joebochill 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.