storybook: [CRA] dynamic Import don't work

Describe the bug If using dynamic import, throw error Support for the experimental syntax 'dynamicImport' isn't currently enabled. But in CRA don’t have the error.

To Reproduce Steps to reproduce the behavior:

Create a new project with CRA and SB
Use dynamic import
See error

System:

OS: [MacOS]
Framework: CRA 2.0.5
Version: [e.g. 4.0.4]

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 5
Comments: 24 (20 by maintainers)

Most upvoted comments

As a workaround, you can create .babelrc in the .storybook dir with something like this:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

(Maybe some other plugins/presets will be needed)

@Hypnosphi , WYT about adding this by default ? looks like CRA uses it

igor-dv on Nov 8, 2018

Came across this today - took some digging, but eventually found a solution.

The bug is actually in webpack, which storybook uses.

It is this: https://github.com/webpack/webpack/issues/8656

The solution is to install the correct version of acorn

npm i --save-dev acorn@6.1.1

Maybe worth doing the whole rm -rf node_modules && rm package-lock.json thing as well.

For completeness, here is the .babelrc file that worked with our project:

.babelrc

{
  "presets":[
    ["@babel/preset-env"],
    ["@babel/preset-react"],
  ],
  "plugins": [
    ["@babel/plugin-proposal-class-properties"],
    ["@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ],
    ["@babel/plugin-syntax-dynamic-import"]
  ]
}

and relevant devdeps from package.json:

  "devDependencies": {
    "@babel/core": "7.4.5",
    "@babel/plugin-proposal-class-properties": "^7.4.4",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/preset-react": "^7.0.0",
    "@babel/register": "7.4.4",
    "@babel/runtime": "7.4.5",
    "@storybook/addon-actions": "^5.1.9",
    "@storybook/addon-knobs": "^5.1.9",
    "@storybook/addon-links": "^5.1.9",
    "@storybook/addons": "^5.1.9",
    "@storybook/react": "^5.1.9",
    "acorn": "^6.1.1",
    "babel-loader": "^8.0.6",
    ...
}

patrickleet on Jul 2, 2019

Released in alpha: https://github.com/storybooks/storybook/releases/tag/v4.1.0-alpha.8

shilman on Nov 25, 2018

Hi @igor-dv, This code exists in one of my components:

 require('../../../styles/graphiql.css')
      import('graphiql').then((graphiql) => {
        this.setState({graphiqlModule: graphiql.default})
      })

Which yielded this error:

ERROR in ....js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: ....js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (169:7):

I’ve tried adding the recommended plugins to a babelrc file and running storybook v4.1.0-alpha.8, the error persists.

motleydev on Nov 27, 2018

This issue persists in both alpha and with .babelrc added. Any update on this?

motleydev on Nov 27, 2018