example codesandbox missing dependency

[statist32]

From the offical website the (first) codesandbox example is not working due to a missing dependency.
https://codesandbox.io/s/xc0bo?module=/example

[ebonow]

Greetings @statist32 ,

I can confirm that this is an issue.

The demo website uses the react-codesandboxer package to automagically create codesandbox examples. The package has to make some assumptions about the specified imports and in this case when the source file relies on a file in another directory (ie: docs/styled-components.js) it assumes that the imports are inferred to be relative to that directory.

In this case, react-syntax-highlighter is not found in /docs.

It would seem that there is a way to correct this with the importReplacements prop. I can play around with this a bit more this week to see if this could potentially be a quick fix, but would be open to anyone else testing this and creating a PR.

As a workaround, you should be prompted to Add react-syntax-highlighter as dependency in the window, which should allow you to manually add the dependency for your use-case.

[dimbslmh]

1. Add react-syntax-highlighter as dependency
2. Edit /docs/styled-components.js

import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";

const { registerLanguage } = SyntaxHighlighter;

[luanecavalcantizup]

1. Add react-syntax-highlighter as dependency
2. Edit /docs/styled-components.js

import { PrismLight as SyntaxHighlighter } from "react-syntax-highlighter";
import jsx from "react-syntax-highlighter/dist/esm/languages/prism/jsx";
import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/prism";

const { registerLanguage } = SyntaxHighlighter;

Tried this, but still didn't work. So I made some small changes here: https://codesandbox.io/s/codesandboxer-example-forked-tzkog?file=/example.js

[ebonow]

Thanks for your patience on this. I removed the styled-components dependency entirely and have a PR out for it. For an intro example, it seems fitting to make the jsx a bit more straightforward.