Could not find module in path: 'react-syntax-highlighter/prism-light' (Single example)

On https://react-select.com/home the link to the CodeSandbox example for the Single select list opens up https://codesandbox.io/s/53pf1?module=/example.js that has the following error :

DependencyNotFoundError
Could not find dependency: 'react-syntax-highlighter' relative to '/docs/styled-components.js'

I did install the react-syntax-highlighter dependency (10.3.0) as suggested but I get

ModuleNotFoundError
Could not find module in path: 'react-syntax-highlighter/prism-light' relative to '/docs/styled-components.js'

Can you fix it please ? Thanks !

[luanecavalcantizup]

here is the working example https://codesandbox.io/s/codesandboxer-example-forked-tzkog?file=/example.js

[shubhamgupta47]

Just replace the initial few lines with this:

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 customTomorrow = {
  ...tomorrow,
  'code[class*="language-"]': {
    ...tomorrow['code[class*="language-"]'],
    fontFamily: null // inherit from css
  },
  'pre[class*="language-"]': {
    ...tomorrow['pre[class*="language-"]'],
    fontFamily: null // inherit from css
  }
};

SyntaxHighlighter.registerLanguage("jsx", jsx);

This would work.