Migrate from core-js@2 to core-js@3 in Babel config

Feature request

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

core-js@3 has been released in March 2019, adding a lot of new features. It’s a great time to revamp the Babel config provided by Next.

Describe the solution you’d like

A modern-ish approach to configure Babel.

Describe alternatives you’ve considered

Got rid of next/babel preset in custom Babel config, adding everything by hand.

Additional context

So, I had this quite straightforward Babel config (.babelrc) for ages:

{
  "plugins": [
    "@babel/plugin-transform-flow-strip-types",
    "babel-plugin-styled-components",
    "inline-react-svg"
  ],
  "presets": [
    "next/babel"
  ]
}

with the following .browserslistrc:

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

and eventually I discovered that the app doesn’t work in IE 11. I mean, something worked and something didn’t. So I started to dig up to make sure every feature which Internet Explorer 11 is missing is polyfilled.

I checked the next/babel preset and figured out that it contains both @babel/plugin-transform-runtime plugin and @babel/preset-env:

 [
        require('@babel/plugin-transform-runtime'),
        {
          corejs: 2,
          helpers: true,
          regenerator: true,
          useESModules: supportsESM && presetEnvConfig.modules !== 'commonjs',
          ...options['transform-runtime'],
        },
],

Here, the polyfilling is being done by the @babel/plugin-transform-runtime plugin, using core-js@2. But in the age of Babel ^7.4, it’s suggested to use @babel/preset-env for that, setting its useBuiltIns and corejs options.

Being unable to use @babel/preset-env and disable @babel/plugin-transform-runtime, I “dissected” the whole next/babel preset and reassembled it in custom .babelrc, excluding some plugins which are irrelevant for my project (like AMP and styled-jsx).

So I ended up with this:

{
  "plugins": [
    "@babel/plugin-transform-flow-strip-types",
    "inline-react-svg"
  ],
  "env": {
    "development": {
      "plugins": [
        "babel-plugin-styled-components",
        "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
          }
        ]
      ],
      "presets": [
        [
          "@babel/preset-env",
          {
            "debug": true,
            "modules": false,
            "exclude": [
              "transform-typeof-symbol"
            ],
            "useBuiltIns": "usage",
            "corejs": "3.1"
          }
        ],
        [
          "@babel/preset-react",
          {
            "development": true
          }
        ]
      ]
    },
    "production": {
      "plugins": [
        "babel-plugin-styled-components",
        "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
          }
        ]
      ],
      "presets": [
        [
          "@babel/preset-env",
          {
            "modules": false,
            "exclude": [
              "transform-typeof-symbol"
            ],
            "useBuiltIns": "usage",
            "corejs": "3.1"
          }
        ],
        "@babel/preset-react"
      ]
    },
    "test": {
      "plugins": [
        "babel-plugin-styled-components",
        "@babel/plugin-proposal-class-properties"
      ],
      "presets": [
        [
          "@babel/preset-react",
          {
            "development": true
          }
        ],
        [
          "@babel/preset-env",
          {
            "targets": "node 10.16",
            "useBuiltIns": false,
            "ignoreBrowserslistConfig": true
          }
        ]
      ]
    }
  }
}

(Note: babel.config.js didn’t work for me, so I stayed with the .babelrc for now)

That being said, please consider upgrading the next/babel preset to make sure it’s using all the latest/greatest stuff.

Nice project by the way 🙂.

[sombreroEnPuntas]

Whit “next”: “^9.1.3”, I get: warning next > @babel/runtime-corejs2 > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3 and warning next > styled-jsx > babel-types > babel-runtime > core-js@2.6.11: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3.

Updating the deps would fix this warning I guess 😃

[timneutkens]

We’re removing core-js being included in Next.js completely in favor of a separate chunk only loaded in older browsers: https://github.com/zeit/next.js/pull/10212