[docs] CodeSandbox demo is throwing an error

[brauliodiez]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Browsing the official documentation, card section:

https://mui.com/components/cards/

Opening the Complex interaction example official codesandbox (shrimp and chorizo paella):

https://codesandbox.io/s/qf542i?file=/demo.js

The example is not running as expected, instead a TypeScript error is thrown:

TypeError
(0 , $csb___emotion_utils.registerStyles) is not a function

I have tried to refresh to check if it was an issue of codesanbox, but the error persists.

Expected behavior 🤔

It should run the example with no issues and display the card as usual.

Steps to reproduce 🕹

Steps:

1. Navigate to the react card component official documentation (https://mui.com/components/cards/)
2. Go down to the complex interaction (shrimp and chorizo paella example)
3. Click on the codesandbox link (https://codesandbox.io/s/qf542i?file=/demo.js)
4. Error is displayed, it's strange because the codesandboxes solutions is JavaScript based but we get a TypeScript error.

Context 🔦

Just browsing the official documentation, this could be an issue if somebody just wants to run the example and learn from it (stackblitz demo works)

Your environment 🌎

Official Codesanbox

Google Chrome

[MyNameIsTakenOMG]

Same here, and I was checking the snack bar demo, and somehow it just doesn't work today while it worked yesterday😂 Anyway, many thanks to @sscotth for your solution, it worked now after rolling back to v11.6👍

[abhinav-22-tech]

For temporary solution change @emotion/styled: "latest" to @emotion/styled: "v11.6.0".

Please check this: https://codesandbox.io/s/buttonappbar-material-demo-forked-fg0tr9?file=/package.json

[SanketRP]

Dropping @emotion/styled back to v11.6.0 fixes this for me

This really works thanks to you my laptop survived

[prescottbreeden]

This didn't work for me:

  "dependencies": {
    ...
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "11.6.0",
    "@mui/material": "^5.4.2",
    ...

{
  "name": "@emotion/styled",
  "version": "11.6.0",
  "description": "styled API for emotion",
  "main": "dist/emotion-styled.cjs.js",
  "module": "dist/emotion-styled.esm.js",
  "types": "types/index.d.ts",
  "license": "MIT",
  ...

tried rolling back emotion/react as well and no luck

update -- problem was chakra provider -- my app is converting to MUI and removing the provider at the top of the dom tree solved it

[flaviendelangle]

All the Codesandbox of X have the same issue
It's not only limited to the Card

[m4theushw]

I guess we don't have too much to do here, unless temporary downgrading @emotion/styled. Downloading the CodeSandbox and running it locally works. This registerStyles was added in @emotion/utils v1.1.0, but CodeSandbox is still loading v1.0.0. It may get fixed by itself in the following days.

[oliviertassinari]

Note that this alternative still works:

I recall seeing another instance of this cache issue with codesandbox in #16979. In our case, it looks like a bug with Codesandbox's cache. Will see codesandbox/codesandbox-client#6484.

[m4theushw]

It's working again. https://codesandbox.io/s/on9qjr?file=/demo.tsx

I'm closing.