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

[bendobos]

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 :).

[shilman]

@bendobos any idea what changed between 5.2 and 5.3 cc @atanasster

[stale]

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!

[shilman]

cc @ndelangen was syntax-highligter upgraded in 5.3? seems like we are seeing a ton of problems related to it.

[ndelangen]

@shilman yes it was:
d99d96c

[ndelangen]

How does relate this this issue though?

[shilman]

I don't know? Just that it wasn't an issue in 5.2.8 and AFAIK nothing relevant changed in docs.

[ndelangen]

Ow now I see the error log and that points to react-syntax-highlighter...

[ndelangen]

I don't understand though why it would be different now.

We've had this plugin in the babel config for ages:

storybook/lib/core/src/server/common/babel.js

Line 29 in 07f37bc

require.resolve('@babel/plugin-syntax-dynamic-import'),

[stale]

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!

[stale]

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!