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

Most upvoted comments

@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

     ["@babel/preset-env", {
        "loose": true,
        "useBuiltIns": "usage",
        "corejs": 3,
        "modules": false
      }],

image