@bable/plugin-transform-runtime with corejs option doesn't replace Promise created by import()

Bug Report

Current behavior Hi guys, I’m working on a widget which is being implemented on various websites which is why I want to avoid polluting global scope with polyfills. The widget app is built using create-react-app and I add babel plugins to it thanks to react-app-rewired and customize-cra like this:

addBabelPlugin([
    "@babel/plugin-transform-runtime",
    {
      corejs: 3,
      version: "^7.7.4",
    },
  ])(config);

I have also MiniCssExtractPlugin enabled to handle css files.

When I look at the compiled JS code, it looks like loading both JS and CSS chunks still tries to use the global Promise instead of being replaced with the corejs alias:

Writing the following code:

Toggle code

import "./index.css";
import("./App");

const test = () => Promise.resolve("resolve test");
test();

Results in the following bundle:

Toggle code

// ...
function(t){var n=[],r=e[t];if(0!==r)if(r)n.push(r[2]);else{var i=new Promise((function(n,o){r=e[t]=[n,o]}));n.push(r[2]=i);var c,u=document.createElement("script");u.charset="utf-8",u.timeout=120,o.nc&&u.setAttribute("nonce",o.nc),u.src=function(t){return o.p+"static/js/"+({}[t]||t)+"."+{1:"6a5fe460"}[t]+".chunk.js"}(t);var a=new Error;c=function(n){u.onerror=u.onload=null,clearTimeout(f);var r=e[t];if(0!==r){if(r){var o=n&&("load"===n.type?"missing":n.type),i=n&&n.target&&n.target.src;a.message="Loading chunk "+t+" failed.\n("+o+": "+i+")",a.name="ChunkLoadError",a.type=o,a.request=i,r[1](a)}e[t]=void 0}};var f=setTimeout((function(){c({type:"timeout",target:u})}),12e4);u.onerror=u.onload=c,document.head.appendChild(u)}return Promise.all(n)}
// ...
function(t,n,r){"use strict";r.r(n);var e=r(56),o=r.n(e);r(98);r.e(1).then(r.t.bind(null,99,7));o.a.resolve("resolved test")}
// ...

** Repo with minimal example:** https://github.com/jedlikowski/babel-transform-runtime-dynamic-import

Expected behavior Chunk loading code is replaced with corejs alias instead of relying on global Promise

Environment

System:
    OS: macOS 11.1
  Binaries:
    Node: 14.15.3 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.9 - /usr/local/bin/npm
  npmPackages:
    @babel/plugin-transform-runtime: ^7.12.10 => 7.12.10 
    @babel/runtime-corejs3: ^7.12.5 => 7.12.5 

[jedlikowski]

Yeah. Still feels like something that should be handled somehow. @bable/plugin-transform-runtime promises to alias the pollyfillable features and here it’s not happening. Is there a way to hook up to the webpack compilation process to transform this Promise?

[mathiassoeholm]

Ah, so the Promise comes from Dynamic imports. It even says in the webpack docs:

import() calls use promises internally. If you use import() with older browsers (e.g., IE 11), remember to shim Promise using a polyfill such as es6-promise or promise-polyfill.