Ability to opt-out from using specific Babel plugins/presets from next/babel

[awthwathje]

Feature request

Is your feature request related to a problem? Please describe.

Can't opt-out from plugins/presets in next/babel.

Describe the solution you'd like

Ability to configure next/babel in a way to be able to exclude certain features.

Describe alternatives you've considered

Ended up with completely-custom Babel config.

Additional context

When trying to figure out a way to disable @babel/plugin-transform-runtime to make sure @babel/preset-env is polyfilling correctly, I did realize that there is no way to opt-out from specific next/babel plugins/presets.

My wild suggestion is to introduce the null to next/babel options, so when it is provided, the corresponding plugin is not loaded. Like this:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {},
        "transform-runtime": null,
        "styled-jsx": {},
        "class-properties": {}
      }
    ]
  ],
  "plugins": []
}

[Timer]

I believe the option you need to send to @babel/plugin-transform-runtime is { corejs: false }. I'm not sure there's a lot of value in letting users configure the babel plugin in this way.

If there's a bug or better behavior, we should integrate it directly into core for all users to benefit from.

edit: sounds like #8103 is proposing exactly that 👍

[awthwathje]

@Timer I've just tried the following presets:

"presets": [
  [
    "next/babel",
    {
      "preset-env": {
        "debug": true,
        "useBuiltIns": "usage",
        "corejs": "3.1"
      },
      "transform-runtime": {
        "corejs": false
      }
    }
  ]
]

and it didn't work. es.object.assign wasn't polyfilled and IE 11 complained about the lack of it.

Here's the @babel/preset-env's debug log:

[/opt/webapp/src/pages/_app.js] Added following core-js polyfills:
  es.array.filter { "ie":"11" }
  es.array.iterator { "ie":"11" }
  es.array.map { "ie":"11" }
  es.object.to-string { "ie":"11" }
  es.regexp.to-string { "edge":"15", "ie":"11" }
  es.string.ends-with { "edge":"15", "ie":"11" }
  es.string.iterator { "ie":"11" }
  web.dom-collections.iterator { "edge":"15", "ie":"11", "safari":"12" }
  web.url { "edge":"15", "ie":"11" }

I've moved the suggestion to be able to opt-out to this separate issue, because I don't feel that it should be a part of the Babel Config Revamp story. But if you feel that it should, I'm totally fine with that.

[Timer]

This sounds like a bug with preset-env, nothing to do with Next.js itself.

Can you open an issue with them asking why Object.assign wasn't polyfilled?

Note, it may be due to using { ...a } without direct usage of Object.assign.

Maybe try adding an includes to preset-env that has es.object.assign?

[awthwathje]

@Timer I have a strong impression that it is actually not a bug in @babel/preset-env, but rather an undocumented feature 🙂.

Anyway, I just filed the issue with the Babel project.

P.S. React itself uses Object.assign() directly, and in our codebase it's not used at all.

P.P.S. include doesn't work with useBuiltIns: 'usage', because in this case Babel doesn't know where exactly to include.

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.