Enable Babel syntax support for the dynamic import specification within `node_modules` such that webpack can handle the statements

Is this a bug report?

Yes

Did you try recovering your dependencies?

(Write your answer here.)

yarn -v
1.5.1

Which terms did you search for in User Guide?

experimental syntax ‘dynamicImport’

Environment

npx create-react-app --info .
Please specify the project directory:
  create-react-app <project-directory>

But this is what is relevant:

node -v
v8.6.0
yarn -v
1.5.1
"react-scripts": "2.0.0-next.b2fd8db8",
"react-styleguidist": "7.0.14"
MacOS X

Steps to Reproduce

1. git clone https://github.com/stereobooster/async-precious.git
2. cd async-precious
3. git checkout styleguidist-bug
4. yarn
5. yarn styleguide

Expected Behavior

No error

Actual 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)

Reproducible Demo

1. git clone https://github.com/stereobooster/async-precious.git
2. cd async-precious
3. git checkout styleguidist-bug

As far as I understand this happens due to #3776. Related issue https://github.com/styleguidist/react-styleguidist/issues/987

[Timer]

I’m not sure of the best resolution here – we received significant flak about not compiling node_modules, so if this ends up breaking packages who use experimental syntax only understood by a bundler [webpack], I think I can live with that.

This case might be semi-unique because it uses the import() specification, which we suggest for usage – I wouldn’t see major harm in allowing this to be parsed so that webpack can handle it.

Where I’m torn is that if the import() specification changes, we are willing to provide codemods to upgrade a create-react-app codebase, though updating packages may be more difficult. However, since this is already widely adopted in the community (by webpack users), I think the potential for change here is minimal.

I’d like to hear what other maintainers think on the subject, @iansu @gaearon.

[stereobooster]

from react-loadable homepage

const LoadableComponent = Loadable({
  loader: () => import('./my-component'), // <-- dynamic import
  loading: Loading,
});