Bug Report: babel-preset-env feature-detection error with dynamic import() statements.

[jgerigmeyer]

Bug Report:

When using babel-preset-env with useBuiltIns: 'usage' and webpack's dynamic imports (e.g. import('my-module').then(...)) -- along with @babel/plugin-syntax-dynamic-import -- feature-detection fails to include es6.promise, which is required for the code to work on IE11.

Input Code

import('my-module');

Compiled input code:

__webpack_require__.e/* import() */(2).then(__webpack_require__.bind(null, 155));

Elsewhere in the Webpack runtime:

/******/ 	__webpack_require__.e = function requireEnsure(chunkId) {
/******/ 		...
/******/ 		// setup Promise in chunk cache
/******/ 		var promise = new Promise(function(resolve, reject) {
/******/ 			installedChunkData = installedChunks[chunkId] = [resolve, reject];
/******/ 		});
/******/ 		installedChunkData[2] = promise;

Babel/Babylon Configuration (.babelrc, package.json, cli command)

{
  plugins: ['@babel/plugin-syntax-dynamic-import'],
  presets: [
    [
      '@babel/preset-env',
      {
        modules: false,
        useBuiltIns: 'usage',
      },
    ],
  ],
}

Expected Behavior

Using targets:
{
  "ie": "11"
}

Using modules transform: false

Using polyfills with `usage` option:
[/path/to/my/file.js] Added following polyfill:
  es6.promise { "ie":"11" }

No errors in IE 11.

Current Behavior

Using targets:
{
  "ie": "11"
}

Using modules transform: false

Using polyfills with `usage` option:
[/path/to/my/file.js] Based on your code and targets, none were added.

IE11 error: 'Promise' is undefined

Possible Solution

Not sure the ideal fix -- is this a bug in babel-loader, or @babel/preset-env, or @babel/plugin-syntax-dynamic-import, or even webpack? In the meantime, a workaround is to add either of the following in the input JS file:

const p = new Promise();

or

import 'core-js/modules/es6.promise';

Your Environment

software	version(s)
Babel	7.0.0-beta.40
webpack	3.11.0
node	8.9.4
npm	5.6.0
yarn	1.3.2
Operating System	macOS 10.13.3

[babel-bot]

Hey @jgerigmeyer! 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.

[hzoo]

So this is because it doesn't know that import is going to be turned into a Promise eventually and thus it doesn't add the polyfill.

Yeah you can even just do Promise; as a workaround. Or include it in the includes option. Not sure how we are supposed to deal with this, unless we also infer that you are using webpack, etc.

[jgerigmeyer]

Yeah, that makes sense. At the very least it seems like a note about this should be added to the documentation, probably of @babel/plugin-syntax-dynamic-import?

[nathan-isaac]

Just for future reference, IE required me to include promise and array iterator polyfills to make dynamic imports work.

This is what I did in my webpack config.

const config = {
    entry: [
        'core-js/modules/es6.promise',
        'core-js/modules/es6.array.iterator',
        path.resolve(__dirname, "src/main.js"),
    ],
    // ...
}

[existentialism]

@nathanjisaac want to push a PR to the website repo adding this helpful tip?

[shane-tw]

I'm encountering this same issue with transform-runtime.
The above solution sadly wouldn't work as I'm pretty sure(?) that would mean polluting the global scope.
Is there a workaround for transform-runtime anyone recommends?

[nicolo-ribaudo]

Babel doesn't run on the webpack runtime code, so transform-runtime can't work here (unless you run Babel on the file generated by webpack).

[zloirock]

It's not a problem to include Promise dependencies on dynamic import statement in preset-env. I'll add it in #7646.

[sarod]

Edit: I was wrong it appears that this solution does not work.

For future reference I modified my preset-env include instead of modifying my webpack config as It allows me to collocate everything related to IE support:

{
   presets: [
      [
         '@babel/env',
         {
            "useBuiltIns": "usage",
            "corejs": {version: 3},
            "include": [
               // We need to include ie11 polyfills used by webpack dynamic import
               // because webpack generated code does not go through babel
               'es.promise',
               'es.array.iterator'
            ],
            "targets": [
               'ie >= 11',
               //...
            ]
         }
      ],
   ]
}

[zloirock]

@sarod with core-js@3 it should work without include section. More other, include makes no sense with useBuiltIns: usage.

[sarod]

@zloirock If I use a dynamic-import in my code it looks like "usage" does not include the promise automatically which would make sense according to @nicolo-ribaudo comment above given that the Promise is only used in webpack runtime code.

In any case I can make it work on IE11 by either:

• Adding the polylfills explicitely in webpack entry as documented on https://babeljs.io/docs/en/babel-plugin-syntax-dynamic-import#working-with-webpack-and-babel-preset-env
• Or by adding the include in my babel/env preset config

But if I remove them both IE11 fails to load with "Unhandled promise rejection TypeError: Target is not iterable" raised from core-js/internal/iterate.js.
Debugging it it looks like the Promise polyfill is properly loaded but it is not iterable.

[sarod]

After more tests it appears I was wrong: adding the "include" config in preset does not help. I probably had a caching issue somewhere. Sorry about that.

However I still need to modify my webpack entry even if I use core-js@3 & "useBuiltIns: usage" to include 'core-js/modules/es.array.iterator'
From what I understand @zloirock you think this is a bug right? If so should I create a separate issue?

[zloirock]

@sarod it's tested and should work. So yes, it's another issue.