"Support for the experimental syntax 'dynamicImport' isn't currently enabled" after upgrading addon-docs from 5.2.8 to 5.3.3

Describe the bug After upgrading addon-docs from 5.2.8 to the newest 5.3.3, I get the following error when starting storybook:

ERROR in ./node_modules/react-syntax-highlighter/dist/esm/prism-async.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: D:\blah\node_modules\react-syntax-highlighter\dist\esm\prism-async.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (5:12):

  3 | export default createAsyncLoadingHighlighter({
  4 |   loader: function loader() {
> 5 |     return import(
    |            ^
  6 |     /* webpackChunkName:"react-syntax-highlighter/refractor-import" */
  7 |     'refractor').then(function (module) {
  8 |       // Webpack 3 returns module.exports as default as module, but webpack 4 returns module.exports as module.default

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
    at Parser.raise (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:7012:17)
    at Parser.expectPlugin (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:8410:18)
    at Parser.parseExprAtom (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:9497:14)
    at Parser.parseExprSubscripts (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:9237:23)
    at Parser.parseMaybeUnary (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:9217:21)
    at Parser.parseExprOps (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:9083:23)
    at Parser.parseMaybeConditional (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:9056:23)
    at Parser.parseMaybeAssign (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:9015:21)
    at Parser.parseExpression (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:8965:23)
    at Parser.parseReturnStatement (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:11059:28)
    at Parser.parseStatementContent (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:10738:21)
    at Parser.parseStatement (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:10690:17)
    at Parser.parseBlockOrModuleBlockBody (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:11266:25)
    at Parser.parseBlockBody (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:11253:10)
    at Parser.parseBlock (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:11237:10)
    at Parser.parseFunctionBody (D:\Git\web-test\node_modules\@babel\parser\lib\index.js:10256:24)
 @ ./node_modules/react-syntax-highlighter/dist/esm/index.js 5:0-54 5:0-54
 @ ./node_modules/@storybook/components/dist/syntaxhighlighter/syntaxhighlighter.js
 @ ./node_modules/@storybook/components/dist/index.js
 @ ./node_modules/@storybook/addon-docs/dist/blocks/index.js
 @ ./node_modules/@storybook/addon-docs/blocks.js
 @ ./.storybook/preview.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/preview.j
s (webpack)-hot-middleware/client.js?reload=true&quiet=true

I have created a .babelrc in the .storybook folder with the following contents:

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

and obviously installed the plugin: npm install --save-dev @babel/plugin-syntax-dynamic-import. This does not change the error message above.

I also upgraded all other @storybook dependencies to their latest versions:

"@storybook/addon-a11y": "^5.3.3",
"@storybook/addon-actions": "^5.3.3",
"@storybook/addon-backgrounds": "^5.3.3",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-docs": "^5.3.3",
"@storybook/addon-knobs": "^5.3.3",
"@storybook/addon-notes": "^5.3.3",
"@storybook/addon-viewport": "^5.3.3",
"@storybook/web-components": "^5.3.3",

[bendobos]

I just noticed that the plugin needs to be applied to babel-loader like so:

    config.module.rules.push({
      test: /\.js?$/,
      use: {
        loader: 'babel-loader',
        options: {
          plugins: ['@babel/plugin-syntax-dynamic-import']
        }
      }
    });

If you do it that way, the error is gone 😃.

[stale[bot]]

Hey there, it’s me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!