React-styleguidist: Support for the experimental syntax 'dynamicImport' isn't currently enabled

[stereobooster]

Current behavior

styleguidist server
./node_modules/react-styleguidist/lib/rsg-components/Editor/EditorLoader.js
Syntax error: async-precious/node_modules/react-styleguidist/lib/rsg-components/Editor/EditorLoader.js: Support for the experimental syntax 'dynamicImport' isn't currently enabled (36:4):

  34 |          var _this2 = this;
  35 |
> 36 |          import('rsg-components/Editor/Editor').then(function (module) {
     |          ^
  37 |              _this2.setState({ editor: module.default });
  38 |          });
  39 |      }

Add @babel/plugin-syntax-dynamic-import (https://git.io/vb4Sv) to the 'plugins' section of your Babel config to enable parsing.
    from thread-loader (worker 0)

To reproduce

git clone https://github.com/stereobooster/async-precious.git
cd async-precious
git checkout styleguidist-bug
yarn
yarn styleguide

Demo is not based on template, but I guess this doesn't matter because issue is with react-scripts@next.

Issue happens with [email protected] and [email protected].

But not with [email protected] and [email protected].

Expected behavior

No error

[sapegin]

I'm wondering why are they enabling Babel inside node_modules.

[stereobooster]

Here is proposal for it https://github.com/facebook/create-react-app/pull/3776

[sapegin]

I think we should open an issue there, because they say “Verify this doesn't break third-party code” — but it breaks ;-) And they don't have to _compile_ imports, just allow the syntax. Would you mind opening an issue at create-react-app?

[stereobooster]

Yes will open. Thanks for the tip

[jmlivingston]

For what it's worth, I was able to successfully get this running by installing plugin-syntax-dynamic-import then add a .babelrc using create-react-app and react-scripts version 1.1.4. I'm sure mileage will vary.

npm install @babel/plugin-syntax-dynamic-import

.babelrc

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

[stereobooster]

create-react-app bug report confirmed. Will close this

UPD: it is confirmed by not maintainer (facepalm). Why would you write "bug confirmed", if you are not maintainer, but whatever

[jmlivingston]

Yeah, probably should have made that more clear. Maybe "successfully duplicated" would have been more clear? 🤷‍♂️

[stereobooster]

@sapegin can you please take a part in the discussion in create-react-app 🙌. They try to understand if it is easier drop dynamic import in styleguidist or allow it in node_modules. https://github.com/facebook/create-react-app/pull/3776

Thanks

[sapegin]

I don't see any discussion there, is that the right link?

[stereobooster]

Oh sorry, I meant https://github.com/facebook/create-react-app/issues/4477#issuecomment-390203747

[sapegin]

This may be a good solution for that: #1054.

[sapegin]

This was fixed on CRA side, closing.