Storybook: [CRA] dynamic Import don't work

[semeleven]

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:

1. Create a new project with CRA and SB
2. Use dynamic import
3. See error

System:

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

[igor-dv]

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

[hisapy]

I'm having this same issue ... Can you please provide the correct contents of the .babelrc workaround? ...

[igor-dv]

@hisapy, what's wrong in the example above?

[hisapy]

hi @igor-dv ... I didn't try it yet ... I actually was hoping to know what were those other plugins/presets needed ... so instead of correct, I should've said complete
😅

Anyways, for the moment, my workaround is to move my exports out of the module with dynamic import. In my case the module with dynamic imports is the Router config for Found Router. Luckily, I don't need to import that module in any of my stories.

[feonit]

I have the same problem, but i really need this feature in my ui components that wrapped with HOR component for pass the language property with translates. CRA support that fine. I hope that will be fixed, because i want migrate my develop environment to CRAv2 successfully :/

[igor-dv]

@feonit, can you try this - https://github.com/storybooks/storybook/issues/4741#issuecomment-437085226

?

[feonit]

@igor-dv, yes, it work, but additionally i must add other plugins and presets, like "@babel/flow", "@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties" and may be others

[shilman]

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

[feonit]

And today it is not worked for me.

ERROR in multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true
Module not found: Error: Can't resolve 'babel-loader' in '/Users/feonit/github/demo_ui'
@ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true iframe[2]

[motleydev]

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

[igor-dv]

@feonit, your error looks related to that you didn't install babel-loder (and probably @babel/core) since these are peer deps. There is nothing related to dynamic imports in your callstack.

@motleydev, what is exactly your current problem?

[motleydev]

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.

[igor-dv]

Do you maybe have a public repo with reproduction ?

[motleydev]

no I don't - what would be helpful to see?

[igor-dv]

package.json, custom SB things like webpack.config , babelrc, config.js. Files structure

[motleydev]

Here's a peak at those files: https://gist.github.com/motleydev/dc048f43a722b8eb232bc7ab77e0d90f

[motleydev]

Everything had been working prior to that one file with the dynamic import.

[igor-dv]

So you are not using create react app, I don't see any react-scripts pkg in you deps

[igor-dv]

Also

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    defaultConfig.module.rules[0].use[0].loader = require.resolve("babel-loader")

    // use @babel/preset-react for JSX and env (instead of staged presets)
    defaultConfig.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
    ]

    // use @babel/plugin-proposal-class-properties for class arrow functions
    defaultConfig.module.rules[0].use[0].options.plugins = [
      require.resolve("@babel/plugin-proposal-class-properties"),
    ]

Is not needed , since you have all these in the custom .babelrc

[motleydev]

Its a gatsby project and I removed them for some code sanitization. Good to know about the loaders

[motleydev]

anything else stand out?

[igor-dv]

Do you have this error now, after removing the above ?

[motleydev]

So I tried solving it the other way around by adding the new configs into the webpack file and ended up with this;

  // Transpile Gatsby module because Gastby includes un-transpiled ES6 code.
    defaultConfig.module.rules[0].exclude = [/node_modules\/(?!(gatsby)\/)/]

    // use installed babel-loader which is v8.0-beta (which is meant to work with @babel/core@7)
    defaultConfig.module.rules[0].use[0].loader = require.resolve("babel-loader")

    // use @babel/preset-react for JSX and env (instead of staged presets)
    defaultConfig.module.rules[0].use[0].options.presets = [
      require.resolve("@babel/preset-react"),
      require.resolve("@babel/preset-env"),
    ]

    // use @babel/plugin-proposal-class-properties for class arrow functions
    defaultConfig.module.rules[0].use[0].options.plugins = [
      require.resolve("@babel/plugin-proposal-class-properties"),
      require.resolve("@babel/plugin-syntax-dynamic-import"),
      require.resolve('babel-plugin-remove-graphql-queries'),
    ]

which did seem to solve the original issue but now it's complaining about a graphql-language-service-interface. Did I somehow introduce this or was this just an error waiting its turn? :)

[patrickleet]

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 [email protected]

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",
    ...
}