babel: [preset-env] Dynamic import not working in 7.5
Bug Report
Current Behavior
According to this article, https://babeljs.io/blog/2019/07/03/7.5.0#dynamic-import-9552-https-githubcom-babel-babel-pull-9552-and-10109-https-githubcom-babel-babel-pull-10109, dynamic import support should be automatic when using preset-env
. I’ve found this to not be the case on multiple occasions.
For example, when running Jest and our Babel config has modules: commonjs
and targets to node: current
(full config below), we receive the following error.
Error: @babel/plugin-proposal-dynamic-import depends on a modules
transform plugin. Supported plugins are:
- @babel/plugin-transform-modules-commonjs ^7.4.0
- @babel/plugin-transform-modules-amd ^7.4.0
- @babel/plugin-transform-modules-systemjs ^7.4.0
If you are using Webpack or Rollup and thus don't want
Babel to transpile your imports and exports, you can use
the @babel/plugin-syntax-dynamic-import plugin and let your
bundler handle dynamic imports.
I dug into the code and placed console logs within this file: https://github.com/babel/babel/blob/master/packages/babel-preset-env/src/index.js#L131
Here’s the output of the modules/ESM detection.
console.log('MODULES', { modules, plugin: _moduleTransformations.default[modules] });
// MODULES { modules: 'commonjs', plugin: 'transform-modules-commonjs' }
console.log('ESM', { shouldTransformESM, shouldTransformDynamicImport });
// ESM { shouldTransformESM: true, shouldTransformDynamicImport: true }
So far so good. I then added console logs to getPlugin
, to verify which plugins are being added. The output.
PLUGIN transform-modules-commonjs (ADDED)
PLUGIN proposal-dynamic-import (ADDED)
PLUGIN transform-dotall-regex
PLUGIN syntax-async-generators
PLUGIN syntax-object-rest-spread
PLUGIN proposal-unicode-property-regex
PLUGIN syntax-json-strings
PLUGIN syntax-optional-catch-binding
PLUGIN transform-named-capturing-groups-regex
And the output of the preset-env
debug.
@babel/preset-env: `DEBUG` option
Using targets:
{
"chrome": "72",
"firefox": "64"
}
Using modules transform: commonjs
Using plugins:
transform-dotall-regex { "firefox":"64" }
syntax-async-generators { "chrome":"72", "firefox":"64" }
syntax-object-rest-spread { "chrome":"72", "firefox":"64" }
proposal-unicode-property-regex { "firefox":"64" }
syntax-json-strings { "chrome":"72", "firefox":"64" }
syntax-optional-catch-binding { "chrome":"72", "firefox":"64" }
transform-named-capturing-groups-regex { "firefox":"64" }
Correct me if I’m wrong, but the 2 required plugins for dynamic imports have been added above, YET I am still seeing the error at the top of this post. I’m a bit lost on how to resolve this going forward.
Expected behavior/code
Dynamic import works via preset-env
.
Babel Configuration (.babelrc, package.json, cli command)
module.exports = {
ignore: [
'coverage/',
'node_modules/',
'public/',
'esm/',
'lib/',
'tmp/',
'dist/',
'*.d.ts',
'__tests__',
'__mocks__',
],
plugins: [
'@babel/plugin-proposal-class-properties',
'@babel/plugin-proposal-optional-catch-binding',
],
presets: [
[
'@babel/preset-env',
{
debug: true,
loose: true,
modules: 'commonjs',
shippedProposals: true,
targets: false,
},
],
'@babel/preset-react',
'@babel/preset-typescript',
],
};
We target the last 3 chrome and firefox versions using browserlist.
Environment
- Babel version(s): 7.5.5
- Node/npm version: 10.16.2
- OS: OSX 10.14.16
- Monorepo: Lerna + Yarn
- How you are using Babel: cli
Possible Solution
Explicitly adding the plugins to my config. Not sure if this will cause issues for other tools and ESM builds.
Additional context/Screenshots Add any other context about the problem here. If applicable, add screenshots to help explain.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 1
- Comments: 16 (4 by maintainers)
Commits related to this issue
- bump lock file to fix test break https://github.com/babel/babel/issues/10374 — committed to samccone/bundle-buddy by samccone 4 years ago
@RichardPK we got same error today in our CI and resolve the problem by reset cache of the node_modules
I resolve my problem by modify .babelrc,
modules: false