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.

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

[material-ui][Skeleton] Error when using animation="wave" #43611

Closed
nicolasfripp opened this issue Sep 4, 2024 · 1 comment · Fixed by #43740
Closed

[material-ui][Skeleton] Error when using animation="wave" #43611

nicolasfripp opened this issue Sep 4, 2024 · 1 comment · Fixed by #43740
Assignees
Labels
bug 🐛 Something doesn't work component: skeleton This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material package: styled-engine-sc Specific to styled-components

Comments

@nicolasfripp
Copy link

nicolasfripp commented Sep 4, 2024

Steps to reproduce

On "@mui/material": "5.16.6" worked fine. When trying to upgrade to "@mui/material": "6.0.2" I started seeing that error.

Current behavior

When I use the following code:

<Skeleton animation="wave"/>

I get this error:

Uncaught Error: It seems you are interpolating a keyframe declaration (ktkbif) into an untagged string. This was supported in styled-components v3, but is not longer supported in v4 as keyframes are now injected on-demand. Please wrap your string in the css\`\` helper which ensures the styles are injected correctly. See https://www.styled-components.com/docs/api#css
    at he (chunk-VEPIQ3YR.js?v=960f022c:854:264)
    at e.<anonymous> (chunk-VEPIQ3YR.js?v=960f022c:1308:17)
    at Array.join (<anonymous>)
    at Array.toString (<anonymous>)
    at ae (chunk-VEPIQ3YR.js?v=960f022c:830:73)
    at e.generateAndInjectStyles (chunk-VEPIQ3YR.js?v=960f022c:1350:24)
    at chunk-VEPIQ3YR.js?v=960f022c:964:31
    at chunk-VEPIQ3YR.js?v=960f022c:966:8
    at O2 (chunk-VEPIQ3YR.js?v=960f022c:970:6)
    at renderWithHooks (chunk-N2IGCJEK.js?v=960f022c:11548:26)

This error does not happen if I use <Skeleton />

Expected behavior

I should see the skeleton instead of getting that error

Context

No response

Your environment

npx @mui/envinfo
Im using chrome.

System:
    OS: Linux 6.6 Ubuntu 20.04.6 LTS (Focal Fossa)
  Binaries:
    Node: 18.17.0 - ~/.nvm/versions/node/v18.17.0/bin/node
    npm: 9.6.7 - ~/.nvm/versions/node/v18.17.0/bin/npm
    pnpm: 8.15.8 - ~/.nvm/versions/node/v18.17.0/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @mui/base: 5.0.0-beta.40 => 5.0.0-beta.40 
    @mui/icons-material: 6.0.2 => 6.0.2 
    @mui/material: 6.0.2 => 6.0.2 
    @mui/styled-engine-sc: npm:@mui/styled-engine-sc@latest => 6.0.2 
    @mui/system: 6.0.2 => 6.0.2 
    @mui/utils: ^6.0.2 => 6.0.2 
    @mui/x-data-grid: ^7.15.0 => 7.15.0 
    @mui/x-data-grid-pro: ^7.15.0 => 7.15.0 
    @mui/x-date-pickers: ^7.15.0 => 7.15.0 
    @mui/x-date-pickers-pro: ^7.15.0 => 7.15.0 
    @mui/x-license-pro: ^6.10.2 => 6.10.2 
    @types/react: 18.3.5 => 18.3.5 
    react: 18.3.1 => 18.3.1 
    react-dom: 18.3.1 => 18.3.1 
    typescript: ^5.5.4 => 5.5.4 

Search keywords: Skeleton error wave

@nicolasfripp nicolasfripp added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 4, 2024
@DiegoAndai DiegoAndai self-assigned this Sep 4, 2024
@DiegoAndai DiegoAndai moved this to Backlog in Material UI Sep 4, 2024
@zannager zannager added the component: skeleton This is the name of the generic UI component, not the React module! label Sep 5, 2024
@ZeeshanTamboli ZeeshanTamboli added the package: material-ui Specific to @mui/material label Sep 7, 2024
@ZeeshanTamboli ZeeshanTamboli changed the title [Skeleton] Error when using animation="wave" [material-ui][Skeleton] Error when using animation="wave" Sep 7, 2024
@siriwatknp siriwatknp added package: styled-engine-sc Specific to styled-components bug 🐛 Something doesn't work and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 10, 2024
@DiegoAndai DiegoAndai assigned siriwatknp and unassigned DiegoAndai Sep 12, 2024
@DiegoAndai DiegoAndai moved this from Backlog to In progress in Material UI Sep 12, 2024
@github-project-automation github-project-automation bot moved this from In progress to Done in Material UI Sep 13, 2024
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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: skeleton This is the name of the generic UI component, not the React module! package: material-ui Specific to @mui/material package: styled-engine-sc Specific to styled-components
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

5 participants