Dynamic import not working if using .babelrc

[cloud-walker]

I'm trying to use this: https://github.com/tc39/proposal-dynamic-import on my experimental boilerplate.

All is working fine if I move babel configuration to the package.json:

"babel": {
  "presets": ["latest", "stage-2", "react"]
}

The same exact configuration give the following error if the babel config is on its own .babelrc file:

source/shared/pages/Home/index.js:4
   import('./Home').then(function (mod) /* istanbul ignore next */{return mod.default;}));});
   ^^^^^^
SyntaxError: Unexpected token import

I've node 7.3, latest yarn and latest jest on OSX

[cloud-walker]

Even using babel on package.json jest is failing if I try to use jest --coverage, reporting the same error.

[thymikee]

I've tried this boilerplate: https://github.com/cloud-walker/frontend-boilerplate, changed System.import() -> import() and it doesn't work for me in any of the cases. Webpack bundle is still working though.

Looks like babel-plugin-dynamic-import-node helps to resolve that. Managed to get it working by adding the following to babel config:

  "env": {
    "test": {
      "plugins": [
        "babel-plugin-dynamic-import-node"
      ]
    }
  }

Make sure you run jest with --no-cache flag every time you make a change to babel config (http://facebook.github.io/jest/docs/troubleshooting.html#caching-issues).

[conatus]

Just encountered this issue from using react-loadable.

The workaround above works, but is this perhaps something to be added to the documentation? Thanks.

[SimenB]

It's mentioned at the bottom here: https://facebook.github.io/jest/docs/en/webpack.html#using-with-webpack-2

[urrri]

I tried using env + react + stage-0 presets and "babel-plugin-dynamic-import-node".
I tried it as explained in https://facebook.github.io/jest/docs/en/webpack.html#using-with-webpack-2
Nothing helps. Still the same error.

[robwierzbowski]

Would be nice to have in a section that's agnostic to Webpack versions. I wouldn't have read through the Webpack 2 docs cause I'm on Webpack 4. Thanks for pointing to it though!

[tomdohnal]

I made it work by using the babel-plugin-transform-dynamic-import plugin.
Make sure that you reference it in your .babelrc (or babel.config.js) plugin section.

...
plugins: [
   ...
   'babel-plugin-transform-dynamic-import'
]

[davidnormo]

In case this helps anyone else:

My tests were failing in CI but not locally the reason for this being that the NODE_ENV was set to production in the Dockerfile. The .babelrc env property is matched against the BABEL_ENV environment variable. Failing that it uses NODE_ENV. Jest will set NODE_ENV to "test" if it is null! Therefore because it was production it wouldn't set it to test and babel would not run the transform.

Joy.

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
Please note this issue tracker is not a help forum. We recommend using StackOverflow or our discord channel for questions.