Skip to content

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

@nicolasfripp

Description

@nicolasfripp

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

Metadata

Metadata

Assignees

Labels

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions