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

Rikpat · 2019-12-31T13:25:38Z

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

The text was updated successfully, but these errors were encountered:

shilman · 2020-01-01T08:55:41Z

@Hypnosphi mind taking a look?

Hypnosphi · 2020-01-01T15:07:56Z

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)']

Rikpat · 2020-01-01T18:21:48Z

I've made the changes, I only need to verify whether I should keep the requires in as consts like this

const jsx = require('react-syntax-highlighter/dist/cjs/languages/prism/jsx').default;
const bash = require('react-syntax-highlighter/dist/cjs/languages/prism/bash').default;
const css = require('react-syntax-highlighter/dist/cjs/languages/prism/css').default;
const html = require('react-syntax-highlighter/dist/cjs/languages/prism/markup').default;
const tsx = require('react-syntax-highlighter/dist/cjs/languages/prism/tsx').default;
const typescript = require('react-syntax-highlighter/dist/cjs/languages/prism/typescript').default;

ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
ReactSyntaxHighlighter.registerLanguage('bash', bash);
ReactSyntaxHighlighter.registerLanguage('css', css);
ReactSyntaxHighlighter.registerLanguage('html', html);
ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
ReactSyntaxHighlighter.registerLanguage('typescript', typescript);

or if I can inline them since they are only used in single function like this

ReactSyntaxHighlighter.registerLanguage(
  'jsx',
  require('react-syntax-highlighter/dist/cjs/languages/prism/jsx').default
);
ReactSyntaxHighlighter.registerLanguage(
  'bash',
  require('react-syntax-highlighter/dist/cjs/languages/prism/bash').default
);
ReactSyntaxHighlighter.registerLanguage(
  'css',
  require('react-syntax-highlighter/dist/cjs/languages/prism/css').default
);
ReactSyntaxHighlighter.registerLanguage(
  'html',
  require('react-syntax-highlighter/dist/cjs/languages/prism/markup').default
);
ReactSyntaxHighlighter.registerLanguage(
  'tsx',
  require('react-syntax-highlighter/dist/cjs/languages/prism/tsx').default
);
ReactSyntaxHighlighter.registerLanguage(
  'typescript',
  require('react-syntax-highlighter/dist/cjs/languages/prism/typescript').default
);

Hypnosphi · 2020-01-01T20:04:13Z

@Rikpat please keep the import statements, only change the paths:

import jsx from 'react-syntax-highlighter/dist/cjs/languages/prism/jsx';
import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
import css from 'react-syntax-highlighter/dist/cjs/languages/prism/css';
import html from 'react-syntax-highlighter/dist/cjs/languages/prism/markup';
import tsx from 'react-syntax-highlighter/dist/cjs/languages/prism/tsx';
import typescript from 'react-syntax-highlighter/dist/cjs/languages/prism/typescript';

It's OK to import a CommonJS module from ES (or TS) module

Rikpat · 2020-01-01T20:57:19Z

@Hypnosphi Sorry I didn't notice your reply before I finished the changes
there's a problem with import statement, not CommonJS related, but the package doesn't have type definitions for CommonJS modules, so build and tests fail on no type definition.
I had to import it as require to work around this

Otherwise we would need to create a declaration for all of the imported modules

Hypnosphi · 2020-01-01T21:06:46Z

Related: DefinitelyTyped/DefinitelyTyped#36739 (comment)

stale · 2020-01-22T21:47:07Z

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

alexandrzavalii · 2020-01-30T09:08:42Z

@Rikpat @Hypnosphi Hi! any updates on the PR?

Hypnosphi · 2020-01-30T14:38:27Z

@alexandrzavalii #9292 (comment)

open another with just the ESM => CJS change

No one did it yet AFAIK, so you can

twhoff · 2020-02-04T02:49:46Z

@Hypnosphi, the workaround you suggested doesn't seem to work for me (looks like react-syntax-highlighter is required for some reason).

Is there some way to modify the path from ESM to CJS using the config?

Hypnosphi · 2020-02-04T14:51:34Z

There isn't AFAIK

mweber-ak · 2020-02-04T18:38:03Z

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

^^^
SyntaxError: Unexpected identifier
`

I am also receiving this. Any update on a fix?

kimwilson · 2020-02-05T18:16:10Z

Also receiving the same error as @weber93 using storybook/storyshots with jest (default nextjs config)

alexandrzavalii · 2020-02-06T20:21:40Z

@Hypnosphi
Not sure if I understood you correctly, but here is the PR https://github.com/storybookjs/storybook/pull/9780/files

shilman · 2020-02-07T16:13:06Z

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.

shilman · 2020-02-08T17:49:31Z

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

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

alexandrzavalii · 2020-02-08T19:39:49Z

@shilman works for me!
Thanks for merging it so quickly :)

shilman · 2020-02-09T07:09:16Z

@alexandrzavalii thanks for the contribution!! you rock!!! 💯

david-golightly-leapyear · 2020-02-26T01:00:01Z

Is this slated to be ported to 5.3? I'm running into this issue there.

david-golightly-leapyear · 2020-02-26T01:06:14Z

Nevermind! I see from the discussion that it is. Thanks!

shilman · 2020-03-11T09:20:16Z

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

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

neil-morrison44 · 2020-03-12T16:19:43Z

Has there been a non-prerelease version released that fixes this or is it still to come?

vasilevach · 2020-03-13T12:28:07Z

Hi guys,

I still get the error, even after updating to v6 everything storybook related:

    "@storybook/addon-actions": "6.0.0-alpha.24",
    "@storybook/addon-info": "^5.3.14",
    "@storybook/addon-links": "6.0.0-alpha.24",
    "@storybook/addon-storyshots": "6.0.0-alpha.24",
    "@storybook/addon-viewport": "6.0.0-alpha.24",
    "@storybook/addons": "6.0.0-alpha.24",
    "@storybook/react": "6.0.0-alpha.24",

Anything I might be missing?

 FAIL  src/components/navigation/navigation.spec.js
  ● Test suite failed to run

    /Users/chris/Documents/Projects/TBS-styleguide/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import jsx from "refractor/lang/jsx.js";

shilman · 2020-03-14T01:32:31Z

@vasilevach Please remove this line:

"@storybook/addon-info": "^5.3.14",

shilman · 2020-03-14T01:32:48Z

@neil-morrison44 coming in the next couple days

shilman · 2020-03-14T08:04:03Z

Jeepers creepers!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.17 containing PR #9780 that references this issue. Upgrade today to try it out!

phoenixeliot · 2020-06-01T00:04:50Z

I was still getting this on 6.0.0-beta.19 (and addon-info alpha.2):

[omitted]/node_modules/@storybook/addon-info/node_modules/react-syntax-highlighter/dist/esm/languages/prism/jsx.js:1
    ({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){import jsx from "refractor/lang/jsx.js";
                                                                                                    ^^^

    SyntaxError: Unexpected identifier

      at ScriptTransformer._transformAndBuildScript (node_modules/@jest/transform/build/ScriptTransformer.js:537:17)
      at ScriptTransformer.transform (node_modules/@jest/transform/build/ScriptTransformer.js:579:25)
      at Object.<anonymous> (node_modules/@storybook/addon-info/node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js:60:35)

In the end this was the transformIgnorePatterns I needed (adding both @storybook/addon-info and its dependency, react-syntax-highlighter):

    "transformIgnorePatterns": [
      "node_modules/(?!lodash-es|antd|@storybook/addon-info|react-syntax-highlighter)"
    ],

shilman added addon: storyshots bug labels Jan 1, 2020

Rikpat mentioned this issue Jan 1, 2020

Changed import of react-syntax-highlighter from esm to cjs #9292

Merged

stale bot added the inactive label Jan 22, 2020

shilman added the in progress label Jan 23, 2020

stale bot removed the inactive label Jan 23, 2020

alexandrzavalii mentioned this issue Feb 6, 2020

Changed import of react-syntax-highlighter from esm to cjs #9780

Merged

shilman closed this as completed Feb 7, 2020

alexandrzavalii mentioned this issue Feb 8, 2020

import react-syntax-highlighter/create-element from cjs #9795

Merged

jasonleibowitz mentioned this issue Mar 2, 2020

Storybook Won't Compile - React Syntax Highlighter Loader Issue #10027

Closed

erikt9 mentioned this issue Mar 17, 2020

Unexpected Token Import Running Jest with Storyshots, Docs, and MDX #9470

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Rikpat commented Dec 31, 2019

shilman commented Jan 1, 2020

Hypnosphi commented Jan 1, 2020

Rikpat commented Jan 1, 2020

Hypnosphi commented Jan 1, 2020 •

edited

Loading

Rikpat commented Jan 1, 2020 •

edited

Loading

Hypnosphi commented Jan 1, 2020 •

edited

Loading

stale bot commented Jan 22, 2020

alexandrzavalii commented Jan 30, 2020

Hypnosphi commented Jan 30, 2020 •

edited

Loading

twhoff commented Feb 4, 2020

Hypnosphi commented Feb 4, 2020

mweber-ak commented Feb 4, 2020

kimwilson commented Feb 5, 2020

alexandrzavalii commented Feb 6, 2020 •

edited

Loading

shilman commented Feb 7, 2020

shilman commented Feb 8, 2020

alexandrzavalii commented Feb 8, 2020

shilman commented Feb 9, 2020

david-golightly-leapyear commented Feb 26, 2020

david-golightly-leapyear commented Feb 26, 2020

shilman commented Mar 11, 2020

neil-morrison44 commented Mar 12, 2020

vasilevach commented Mar 13, 2020

shilman commented Mar 14, 2020

shilman commented Mar 14, 2020

shilman commented Mar 14, 2020

phoenixeliot commented Jun 1, 2020 •

edited

Loading

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

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

Comments

Rikpat commented Dec 31, 2019

shilman commented Jan 1, 2020

Hypnosphi commented Jan 1, 2020

Rikpat commented Jan 1, 2020

Hypnosphi commented Jan 1, 2020 • edited Loading

Rikpat commented Jan 1, 2020 • edited Loading

Hypnosphi commented Jan 1, 2020 • edited Loading

stale bot commented Jan 22, 2020

alexandrzavalii commented Jan 30, 2020

Hypnosphi commented Jan 30, 2020 • edited Loading

twhoff commented Feb 4, 2020

Hypnosphi commented Feb 4, 2020

mweber-ak commented Feb 4, 2020

kimwilson commented Feb 5, 2020

alexandrzavalii commented Feb 6, 2020 • edited Loading

shilman commented Feb 7, 2020

shilman commented Feb 8, 2020

alexandrzavalii commented Feb 8, 2020

shilman commented Feb 9, 2020

david-golightly-leapyear commented Feb 26, 2020

david-golightly-leapyear commented Feb 26, 2020

shilman commented Mar 11, 2020

neil-morrison44 commented Mar 12, 2020

vasilevach commented Mar 13, 2020

shilman commented Mar 14, 2020

shilman commented Mar 14, 2020

shilman commented Mar 14, 2020

phoenixeliot commented Jun 1, 2020 • edited Loading

Hypnosphi commented Jan 1, 2020 •

edited

Loading

Rikpat commented Jan 1, 2020 •

edited

Loading

Hypnosphi commented Jan 1, 2020 •

edited

Loading

Hypnosphi commented Jan 30, 2020 •

edited

Loading

alexandrzavalii commented Feb 6, 2020 •

edited

Loading

phoenixeliot commented Jun 1, 2020 •

edited

Loading