[material-ui][Button] Broken ripple effect with Pigment CSS

[Nayeem-XTREME]

Steps to reproduce

Link to live example: (required)

https://codesandbox.io/p/devbox/x9xflf

Steps:

1. Check the default button on the home page.

Current behavior

After upgrading @pigment-css/nextjs-plugin to 0.0.21 or 0.0.22, the ripple effect is not working.

Expected behavior

The ripple effect should work.

Context

No response

Your environment

npx @mui/envinfo

 System:
    OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
  Binaries:
    Node: 20.11.1 - /usr/local/bin/node
    npm: 10.2.4 - /usr/local/bin/npm
    pnpm: 8.15.4 - /usr/local/share/npm-global/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.13.3 => 11.13.3 
    @emotion/styled: ^11.13.0 => 11.13.0 
    @mui/core-downloads-tracker:  6.0.1 
    @mui/material: ^6.0.1 => 6.0.1 
    @mui/material-nextjs: ^6.0.1 => 6.0.1 
    @mui/material-pigment-css: ^6.0.1 => 6.0.1 
    @mui/private-theming:  6.0.1 
    @mui/styled-engine:  6.0.1 
    @mui/system:  6.0.1 
    @mui/types:  7.2.16 
    @mui/utils:  6.0.1 
    @pigment-css/nextjs-plugin: ^0.0.21 => 0.0.21 
    @pigment-css/react:  0.0.21 
    @pigment-css/unplugin:  0.0.21 
    @types/react: ^18 => 18.3.5 
    react: ^19.0.0-rc-e56f4ae3-20240830 => 19.0.0-rc-e56f4ae3-20240830 
    react-dom: ^19.0.0-rc-e56f4ae3-20240830 => 19.0.0-rc-e56f4ae3-20240830 
    typescript: ^5 => 5.5.4 

Search keywords: Ripple Effect

[DiegoAndai]

Hey @Nayeem-XTREME, thanks for the report!

In the codesandbox you shared, I see the ripple working as expected:

Screen.Recording.2024-09-05.at.11.23.44.mov

Am I missing something?

[Nayeem-XTREME]

@DiegoAndai Ops sorry!!

Might be a node_modules issue. I have fixed it. Can you check here again? Ripple effect doesn't work.
If you can't see that yet, please try restarting the dev server by yarn dev.

https://codesandbox.io/p/devbox/x9xflf

Recording.2024-09-05.231020.mp4

[Nayeem-XTREME]

@DiegoAndai Any update on this?

[DiegoAndai]

@Nayeem-XTREME sorry for the delay, we're investigating the issue 😊

[brijeshb42]

I've found the core issue. While I look for a proper fix, a quick fix here is to add/update your browserlist such that template literals are not transpiled (obviously assuming that you are only supporting such browsers or node versions). For ex, I added this in the package.json and the ripple works -

"browserslist": [
  "maintained node versions"
]

[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

We value your feedback @Nayeem-XTREME! 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!