@babel/preset-env conflicts with @babel/plugin-transform-runtime when using core-js@3

[awthwathje]

Bug Report

Current Behavior
@babel/preset-env can't be used alongside @babel/plugin-transform-runtime for polyfilling. Or maybe it can, but no idea how.

Expected behavior/code
@babel/preset-env and @babel/plugin-transform-runtime work nicely together. Or the opposite should be documented.

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

{
  "plugins": [
    "babel-plugin-styled-components",
    "@babel/plugin-transform-flow-strip-types",
    "inline-react-svg",
    "babel-plugin-react-require",
    "@babel/plugin-syntax-dynamic-import",
    "./node_modules/next/dist/build/babel/plugins/react-loadable-plugin",
    "@babel/plugin-proposal-class-properties",
    [
      "@babel/plugin-proposal-object-rest-spread",
      {
        "useBuiltIns": true
      }
    ],
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false
      }
    ]
  ],
  "presets": [
    [
      "@babel/preset-env",
      {
        "debug": true,
        "modules": false,
        "exclude": [
          "transform-typeof-symbol"
        ],
        "useBuiltIns": "usage",
        "corejs": "3.1"
      }
    ],
    "@babel/preset-react"
  ]
}

.browserslistrc

node 10.16
last 4 chrome versions
last 4 firefox versions
last 4 edge versions
last 2 safari versions
ie 11
not dead

Environment

• Babel version(s): 7.1.0
• Node/npm version: 10.16
• OS: Debian 10
• Monorepo: no
• How you are using Babel: loader

Possible Solution
Make it clear how @babel/plugin-transform-runtime and @babel/preset-env interfere with each other when using core-js@3.

Additional context/Screenshots
Hello. This is a follow-up of a vercel/next.js#8104 issue suggested by @Timer.

I've struggled to make my Next.js project to work nicely in IE 11. I wanted to use @babel/preset-env and core-js@3 for polyfilling the missing ES features, but seems like @babel/plugin-transform-runtime also does perform some polyfilling/transformation, even when provided with corejs: false option.

One problematic feature is es.object.assign. If @babel/plugin-transform-runtime is enabled,
@babel/preset-env will never try to polyfill it, even if it's directly imported from core-js in the code.

Can you please explain if both @babel/preset-env and @babel/plugin-transform-runtime could/should be used together? The documentation is scarce and it's all very confusing at this moment.

[babel-bot]

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

[awthwathje]

I'm pretty sure clarification of this shouldn't take much time, but will help community tremendously. @JLHwung, @nicolo-ribaudo, can you guys maybe check this quickly and respond please?

[nicolo-ribaudo]

useBuiltIns and @babel/plugin-transform-runtime are mutually exclusive. Both are used to add polyfills: the first adds them globally, the second one adds them without attatching them to the global scope.
You should decide which behavior you want and stick with it.

Note that with #10008 (I'm working on it right now) you will be also able to use useBuiltIns: pure, which adds polyfills like transform-runtime does but using preset-env's targets.

[awthwathje]

@nicolo-ribaudo thanks a lot for your efforts to explain! This should be definitely added to the docs and be easily searchable to prevent further questions like this. Ah, wait... There is already a PR for this.