@babel/plugin-transform-runtime causes "Promise is undefined" in IE11

Bug Report

• I would like to work on a fix!

Current behavior My project couldn’t run in IE11 because it encountered “Promise is undefined” when opened. Although webpack is configured to include polyfills when needed. When I commented out @babel/plugin-transform-runtime (so it is no longer used in the webpack config) the project could open in IE11 without any errors.

Input Code The relevant part of the webpack.config where the babel-loader is configured is:

{
        test: /(\.(t|j)s(x?))$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "babel-loader",
            options: {
              cacheDirectory: true,
              babelrc: false,
              plugins: [ "@babel/plugin-transform-runtime" ], // when commented out, the project can run in IE11
              presets: [
                [
                  "@babel/preset-env",
                  {
                    modules: false,
                    targets: {
                      browsers: ["last 2 versions", "ie >= 11"]
                    },
                    useBuiltIns: 'usage',
                    corejs: '3',
                  }
                ],
                "@babel/preset-typescript",
                "@babel/preset-react",
              ]
            }
          }
        ]
      }

Expected behavior I expect the plugin @babel/plugin-transform-runtime to not cause issues in IE11 and to use the polyfill for Promise.

Environment

System:
    OS: Windows 10 10.0.18362
  Binaries:
    Node: 10.15.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.17.3 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    @babel/core: ^7.9.0 => 7.9.0
    @babel/plugin-transform-runtime: ^7.9.0 => 7.9.0
    @babel/preset-env: ^7.9.0 => 7.9.0
    @babel/preset-react: ^7.9.1 => 7.9.1
    @babel/preset-typescript: ^7.9.0 => 7.9.0
    babel-loader: ^8.1.0 => 8.1.0
    eslint: ^6.8.0 => 6.8.0
    webpack: ^4.42.0 => 4.42.0

Possible Solution

Additional context Add any other context about the problem here. Or a screenshot if applicable

[JMarkoski]

You are using @babel/plugin-transform-runtime and @babel/preset-env incorrectly. In this case, you probably have some code that doesn’t explicitly use Promises but uses them indirectly and only later in the code when you use Promises directly, the usage plugin from preset-env injects globally polluting polyfill for Promise, but this doesn’t catch the case where you use them indirectly. Eg. if you use async functions, babel uses a helper called asyncToGenerator that internally uses Promises. And if you didn’t use any Promises explicitely before this code, it will fail, because there is no polyfill for it included. For more thorough answer see my answer here: https://github.com/babel/babel/issues/9853#issuecomment-619587386

[vvanpo]

According to Babel’s maintainer, useBuiltIns from @babel/preset-env and @babel/plugin-transform-runtime are mutually exclusive. This is extremely unclear in the documentation; in fact, in the very first note made in @babel/plugin-transform-runtime’s docs, it even implies that you should combine it with @babel/preset-env’s useBuiltIns if you want global polyfills using core-js@3, even though transform-runtime has no problems using core-js-pure@3 if you configure it to do so.

When you configure @babel/plugin-transform-runtime without options, it injects dependencies on @babel/runtime, which contains no ponyfills, making all this even more confusing. Then there is the fact that transform-runtime’s documentation sections for options polyfill and useBuiltIns claim that they are always turned on, without any description as to what they might do. So all we have to go off is @nicolo-ribaudo’s comment saying that useBuiltIns and @babel/plugin-transform-runtime can’t be used together. Personally, I use both preset-env and transform-runtime, but with useBuiltIns and corejs set to false, and I just inject core-js globally. This way I ensure that all polyfills are available for bundled dependencies that don’t get run through Babel, which often expect things like Promise.