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

[teetotum]

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

[babel-bot]

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

[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.

[vvanpo]

@teetotum one thing I am noticing is that you don't have core-js installed. I haven't checked thoroughly, but I don't think any of the dependencies you've listed install it as a transitive dependency, so I'm unsure of how your build is successful at all, regardless of your inclusion of @babel/plugin-transform-runtime.

[ylemkimon]

For @babel/plugin-transform-runtime to polyfill Promise, you should set corejs: 2 or 3 in its configuration. See https://babeljs.io/docs/en/babel-plugin-transform-runtime#corejs.

[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: #9853 (comment)