es.promise.finally undefined w/ preset-env and multiple chunks

Bug Report

Current behavior When leveraging preset-env and useBuiltIns: 'usage' across multiple chunks, if a chunk injected with es.promise is loaded after a chunk with es.promise.finally, the finally polyfill will be overwritten. This is essentially the same issue detailed in #9705, but the fix for that issue only ensures that imports within the same chunk will be in the correct order. The workaround is the same as in #9705.

Input Code

Chunk 1:

new Promise(resolve => resolve())
  .finally(() => {
    console.log("I am polyfilled")
  });

Chunk 2:

new Promise(resolve => resolve());

Output Code

Chunk 1:

// EXTERNAL MODULE: ./node_modules/core-js/modules/es.promise.js
var es_promise = __webpack_require__("./node_modules/core-js/modules/es.promise.js");

// EXTERNAL MODULE: ./node_modules/core-js/modules/es.promise.finally.js
var es_promise_finally = __webpack_require__("./node_modules/core-js/modules/es.promise.finally.js");

Chunk 2:

// EXTERNAL MODULE: ./node_modules/core-js/modules/es.promise.js
var es_promise = __webpack_require__("./node_modules/core-js/modules/es.promise.js");

Expected behavior At a high level, a developer should be able to leverage preset-env with useBuiltIns: 'usage' across any number of chunks without regard to which Promise features they use and in which order. Whether this is Babel’s responsibility to resolve the order or core-js’ to provide a unified Promise polyfill that doesn’t create this conflict, I couldn’t say.

Babel Configuration (babel.config.js, .babelrc, package.json#babel, cli command, .eslintrc)

• Filename: babel.config.js

{
  presets: [
    [
      '@babel/preset-env',
      {
        corejs: 3,
        useBuiltIns: 'usage'
      }
    ]
  ]
}

Environment

  System:
    OS: Linux 4.19 Debian GNU/Linux 9 (stretch) 9 (stretch)
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.13.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  npmPackages:
    @babel/core: ^7.0.0 => 7.8.4
    @babel/plugin-transform-async-to-generator: ^7.0.0 => 7.8.3
    @babel/plugin-transform-runtime: ^7.0.0 => 7.8.3
    @babel/preset-env: ^7.0.0 => 7.8.4
    @babel/register: ^7.8.3 => 7.8.3
    @babel/runtime: ^7.5.5 => 7.8.4
    babel-eslint: ^9.0.0 => 9.0.0
    babel-jest: ^24.9.0 => 24.9.0
    babel-loader: ^8.0.0 => 8.0.6
    babel-runtime: ^6.26.0 => 6.26.0
    eslint: ^5.15.3 => 5.16.0
    eslint-plugin-babel: ^4.1.1 => 4.1.2
    jest: ^24.9.0 => 24.9.0
    webpack: ^4.0.0 => 4.43.0

[racoleman]

@JLHwung Unfortunately, that doesn’t work. It seems window.Promise gets overwritten when modules/es.promise is required, regardless of which chunk the module actually resides in.

[JLHwung]

Other than changing core-js to support reentrance, you can also workaround this by SplitChunksPlugin

module.exports = {
  //...
  optimization: {
    splitChunks: {
      cacheGroups: {
        polyfill: {
          test: /[\\/]node_modules[\\/](core-js)[\\/]/,
          name: 'core-js',
          chunks: 'all',
        }
      }
    }
  }
};

It should split all core-js modules into a separate chunk.

Ref: https://webpack.js.org/plugins/split-chunks-plugin/#split-chunks-example-3