Storybook: Unexpected Token Import Running Jest with Storyshots, Docs, and MDX

Created on 15 Jan 2020 · 12Comments · Source: storybookjs/storybook

Describe the bug
When running jest with .stories.mdx files in [email protected] and @storybook/addon-storyshots, returns error

.../storybook-docs/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 token import

      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/components/dist/syntaxhighlighter/syntaxhighlighter.js:54:35)

I've looked through many other open issues that are related, but haven't found anyone reporting this specific error (and other's solutions have not resolved it for me).

To Reproduce
Steps to reproduce the behavior:
I've created a minimum reproducible example here with barebones configs to isolate the issue: https://github.com/davidgolden/storybook-mdx-issue

To reproduce:

git clone https://github.com/davidgolden/storybook-mdx-issue.git storybook-mdx-issue
cd storybook-mdx-issue
npm ci
npm run test

Expected behavior
npm run test to execute without error

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
  Binaries:
    Node: 9.4.0 - ~/.nvm/versions/node/v9.4.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v9.4.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.117
    Firefox: 72.0.1
    Safari: 13.0.4
  npmPackages:
    @storybook/addon-docs: ^5.3.3 => 5.3.3 
    @storybook/addon-storyshots: ^5.3.3 => 5.3.3 
    @storybook/react: ^5.3.3 => 5.3.3

Relevant Code Snippets
main.js:

module.exports = {
    stories: ["../**/*.stories.(jsx|mdx)"],
    addons: [
        '@storybook/addon-docs',
    ],
};

babel.config.js:

module.exports = {
    presets: [
        [
            '@babel/preset-env',
            {
                targets: {
                    node: 'current',
                },
            },
        ],
        "@babel/preset-react"
    ],
};

jest.config.js:

module.exports = {
    "transform": {
        '^.+\\.jsx?$': 'babel-jest',
        "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx",
    },
};

Storyshots.test.js:

import initStoryshots from '@storybook/addon-storyshots';

initStoryshots();

storyshots bug mdx

Source

davidgolden

Most helpful comment

Looking at the PR, if you're running into this issue, you can use this in moduleNameMapper: 'react-syntax-highlighter/dist/esm/(.*)': 'react-syntax-highlighter/dist/cjs/$1', which will remap the esm requires to cjs ones. This got me around the issue until the PR is merged and released.

mAAdhaTTah on 19 Jan 2020

👍3

All 12 comments

I was able to resolve this issue by adding this to my jest.config.js:

"transformIgnorePatterns": [
        "node_modules/(?!react-syntax-highlighter|@storybook)"
    ],

I believe this is a bug in storybook/lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx as it is importing the esm version of react-syntax-highlighter rather than the cjs version, and according to Babel:

Sometimes it happens (especially in React Native or TypeScript projects) that 3rd party modules are published as untranspiled. Since all files inside node_modules are not transformed by default, Jest will not understand the code in these modules, resulting in syntax errors. To overcome this, you may use transformIgnorePatterns to whitelist such modules

If this is indeed a bug I'd be happy to open up a PR to fix it.

NOTE: This is did not fix everything in the minimum repo above, but it did fix things for me in my real project. It did get me past the error I was receiving though, and I believe the errors that are happening now are unrelated (probably something to do with storyshots setup).

davidgolden on 15 Jan 2020

I also experienced this exact issue and error while running stories.tsx and _not_ stories.mdx files when upgrading from 5.2.8 to 5.3.3. The jest configuration @davidgolden suggested worked to remove the error, but definitely seems to be a band-aid until a proper fix is released.

patdryburgh on 15 Jan 2020

@davidgolden I think there's a change for the ESM => CJS fix here: https://github.com/storybookjs/storybook/pull/9292

shilman on 16 Jan 2020

👍1

It looks like that does address it and should resolve the issue. Thanks @shilman

davidgolden on 16 Jan 2020

mAAdhaTTah on 19 Jan 2020

👍3

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!