Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[docs] CodeSandbox demo is throwing an error

See original GitHub issue

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:

Navigate to the react card component official documentation (https://mui.com/components/cards/)
Go down to the complex interaction (shrimp and chorizo paella example)
Click on the codesandbox link (https://codesandbox.io/s/qf542i?file=/demo.js)
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

Issue Analytics

State:
Created 2 years ago
Reactions:3
Comments:9 (5 by maintainers)

Top GitHub Comments

7reactions

sscotthcommented, Feb 19, 2022

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

2reactions

m4theushwcommented, Feb 21, 2022

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

I’m closing.

Top Results From Across the Web

FAQs

There are a few possible reasons a repo might throw that error on import. The most common are either a lack of a...

Create a JavaScript Code Sandbox

Create a JavaScript code sandbox using Vite and TypeScript. ... querySelector(targetElement) if (!element) { throw new Error(`Element '${targetElement}' ...

Could not find module in path: 'react/jsx-runtime' relative to ' ...

I am having this error while creating a new React project with MUI. I copied this code example from the docs which works...

Codesandbox Examples

A repo full of examples of how to use react-testing-library and test your react components · 1 · 2 · 3 · 4...

Handling JavaScript errors in React with error boundaries

Any error detected in the try block is thrown as an exception and caught in the catch block, keeping our applications more resilient...