Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[preset-env] Dynamic import not working in 7.5 #10374

Open
milesj opened this issue Aug 29, 2019 · 8 comments

Comments

@milesj
Copy link

commented Aug 29, 2019

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.

@babel-bot

This comment has been minimized.

Copy link
Collaborator

commented Aug 29, 2019

Hey @milesj! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite.

@milesj

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

I noticed multiple versions of @babel/core in my lock file. Gonna dedupe manually and see what happens.

"@babel/core@7.4.3", "@babel/core@^7.1.0":
  version "7.4.3"
  resolved "https://npm.d.musta.ch/@babel/core/-/core-7.4.3.tgz#198d6d3af4567be3989550d97e068de94503074f"
  integrity sha1-GY1tOvRWe+OYlVDZfgaN6UUDB08=
  dependencies:
    "@babel/code-frame" "^7.0.0"
    "@babel/generator" "^7.4.0"
    "@babel/helpers" "^7.4.3"
    "@babel/parser" "^7.4.3"
    "@babel/template" "^7.4.0"
    "@babel/traverse" "^7.4.3"
    "@babel/types" "^7.4.0"
    convert-source-map "^1.1.0"
    debug "^4.1.0"
    json5 "^2.1.0"
    lodash "^4.17.11"
    resolve "^1.3.2"
    semver "^5.4.1"
    source-map "^0.5.0"

"@babel/core@^7.0.0", "@babel/core@^7.5.5":
  version "7.5.5"
  resolved "https://npm.d.musta.ch/@babel/core/-/core-7.5.5.tgz#17b2686ef0d6bc58f963dddd68ab669755582c30"
  integrity sha1-F7JobvDWvFj5Y93daKtml1VYLDA=
  dependencies:
    "@babel/code-frame" "^7.5.5"
    "@babel/generator" "^7.5.5"
    "@babel/helpers" "^7.5.5"
    "@babel/parser" "^7.5.5"
    "@babel/template" "^7.4.4"
    "@babel/traverse" "^7.5.5"
    "@babel/types" "^7.5.5"
    convert-source-map "^1.1.0"
    debug "^4.1.0"
    json5 "^2.1.0"
    lodash "^4.17.13"
    resolve "^1.3.2"
    semver "^5.4.1"
    source-map "^0.5.0"

"@babel/core@^7.4.3":
  version "7.4.5"
  resolved "https://npm.d.musta.ch/@babel/core/-/core-7.4.5.tgz#081f97e8ffca65a9b4b0fdc7e274e703f000c06a"
  integrity sha1-CB+X6P/KZam0sP3H4nTnA/AAwGo=
  dependencies:
    "@babel/code-frame" "^7.0.0"
    "@babel/generator" "^7.4.4"
    "@babel/helpers" "^7.4.4"
    "@babel/parser" "^7.4.5"
    "@babel/template" "^7.4.4"
    "@babel/traverse" "^7.4.5"
    "@babel/types" "^7.4.4"
    convert-source-map "^1.1.0"
    debug "^4.1.0"
    json5 "^2.1.0"
    lodash "^4.17.11"
    resolve "^1.3.2"
    semver "^5.4.1"
    source-map "^0.5.0"

Note: This seems to happen ALL THE TIME WITH YARN. No other package has this de-duping problem, only Babel.

@milesj

This comment has been minimized.

Copy link
Author

commented Aug 29, 2019

Deleting all the dupes in the lock file resolved this issue. This is a very unfortunate scenario. I'm not sure of a way to mitigate this for others.

@deepsweet

This comment has been minimized.

Copy link
Contributor

commented Aug 30, 2019

In my case deduping @babel/plugin-transform-modules-commonjs in yarn.lock helped.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Aug 30, 2019

preset-env should force a compatible version of the modules transform plugin; I'll check.

@milesj

This comment has been minimized.

Copy link
Author

commented Aug 30, 2019

Noticed my duplicates are coming from babel-preset-react-app, since they used fixed versions (it's a transient dep from storybook so I'm not using the latest version).

@gaearon @Timer Noticed you 2 managing the dependencies the most. Any idea why these versions are fixed? Is it because of security concerns?

@Timer

This comment has been minimized.

Copy link
Contributor

commented Aug 31, 2019

@milesj CRA was burnt too often by packages upgrading out of our control -- so we fix the versions.

Can you try to turn on nohoist for these specific dependencies?

This preset is first-and-foremost for Create React App users so we have no immediate plans on changing this.

@nicolo-ribaudo

This comment has been minimized.

Copy link
Member

commented Aug 31, 2019

By looking at preset-env's package.json, it seems that it already forces ^7.4.0: https://unpkg.com/@babel/preset-env@7.4.0/package.json
I think that lerna/npm didn't correctly update your node_modules structure. Are you able to share a repository showing the issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
5 participants
You can’t perform that action at this time.