Syntax Highlighter should import react-syntax-highlighter from CommonJS dist instead of ESModules

Is your feature request related to a problem? Please describe. I have a problem when using Storyshots (It may be a jest misconfiguration, since I’m not really proficient in that, but I’ve tried everything to fix it), that syntaxhighlighter imports react-syntax-highlighter from it’s esm distribution which creates an error for me

({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import jsx from "refractor/lang/jsx.js";
                                                                                             ^^^^^^

    SyntaxError: Cannot use import statement outside a module

Describe the solution you’d like I would like to import react-syntax-highlighter from their cjs dist, since syntaxhighlighter component itself is written in commonjs. This fixed my issue locally.

Current imports:

var _jsx = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/jsx"));

var _bash = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/bash"));

var _css = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/css"));

var _markup = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/markup"));

var _tsx = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/tsx"));

var _typescript = _interopRequireDefault(require("react-syntax-highlighter/dist/esm/languages/prism/typescript"));

fixed imports:

var _jsx = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/jsx"));

var _bash = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/bash"));

var _css = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/css"));

var _markup = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/markup"));

var _tsx = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/tsx"));

var _typescript = _interopRequireDefault(require("react-syntax-highlighter/dist/cjs/languages/prism/typescript"));

Describe alternatives you’ve considered I’ve been trying to fix the jest config for 2 days now, if you can suggest me how to fix this without the need to change these imports, please do.

Are you able to assist bring the feature to reality? yes, I can create a PR right away

[Hypnosphi]

Changing imports to cjs makes sense to me, please open a PR

@Rikpat as a temporary workaround, you can try adding following field to your jest.config.js:

transformIgnorePatterns: ['node_modules/(?!react-syntax-highlighter)']

[shilman]

Olé!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-alpha.7 containing PR #9780 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there’s still more to do.