Regression: bumping Next version from 11 to 12, generated js files are builded ignoring browserlist

[ale-grosselle]

Run next info (available from version 12.0.8 and up)

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.2.0: Sun Nov 28 20:28:54 PST 2021; root:xnu-8019.61.5~1/RELEASE_X86_64
Binaries:
  Node: 16.13.0
  npm: 8.1.0
  Yarn: 1.22.17
  pnpm: N/A
Relevant packages:
  next: 12.0.8
  react: 17.0.2
  react-dom: 17.0.2

What version of Next.js are you using?

12.0.8

What version of Node.js are you using?

16.13.0

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

How are you deploying your application?

Other platform

Describe the Bug

Updating our application from Next 11 to Next 12 we noticed that generated js assets are generated ignoring the browserlist.

For instance, starting from this code:

const callAll = async function () {
  console.log("OK HELLO!");
}

Building using Next 11 (minified version)

() => {!async function () {console.log('OK HELLO!')}(), new t})

Building using Next 12 (minified version)

var n, t = (n = e().
          mark((function n () {
            return e().
              wrap((function (n) {
                for (; ;) switch (n.prev = n.next) {
                  case 0:
                    console.log('OK HELLO!')
                  case 1:
                  case'end':
                    return n.stop()
                }
              }), n)
          })), function () {
          var t = this, r = arguments
          return new Promise((function (o, e) {
            var u = n.apply(t, r)

            function c (n) {i(u, o, e, c, f, 'next', n)}

            function f (n) {i(u, o, e, c, f, 'throw', n)}

            c(void 0)
          }))
        })

Expected Behavior

should respect browserslist.

We discovered that the regression is due to replacing babel in favor of swc.

Forcing the use of babel, adding .babelrc file at the project root, the output files are converted as expected:

{
  "presets": ["next/babel"],
  "plugins": []
}

To Reproduce

• Go to this repo: https://github.com/ale-grosselle/nextjs-browserlist-regression
• navigate to "next11-chrome-94" folder, then run "npm install && npm run build"
• Go to ".next/static" folder and then search "Hello"
• You will find the async function
• navigate to "next12" folder, then run "npm install && npm run build"
• Go to ".next/static" folder and then search "Hello"
• You will find the same function transpiled (for ie11 basically)

[balazsorban44]

Hi, could you test canary? A potentially related change has recently been made #33890

[ale-grosselle]

Hi @balazsorban44,
I tried the 12.0.11-canary.6 version, see the example, but I still having the same problem; the js output have been built ignoring my browserlist (chrome 94).

The transpiled code of this function:

const callAll = async function () {
  console.log("OK HELLO!");
}

is this one:

var f = function () {
        var n, t = (n = e().
          mark((function n () {
            return e().
              wrap((function (n) {
                for (; ;) switch (n.prev = n.next) {
                  case 0:
                    console.log('OK HELLO!')
                  case 1:
                  case'end':
                    return n.stop()
                }
              }), n)
          })), function () {
          var t = this, r = arguments
          return new Promise((function (o, e) {
            var u = n.apply(t, r)

            function c (n) {i(u, o, e, c, f, 'next', n)}

            function f (n) {i(u, o, e, c, f, 'throw', n)}

            c(void 0)
          }))
        })
        return function () {return t.apply(this, arguments)}
      }()

[balazsorban44]

I did some digging, this is because we don't currently pass the Browserslist config to SWC (default compiler over Babel since Next 12), only to PostCSS. So CSS will be correctly targeted, while JS won't.

This is planned to land when this RFC goes out: #33227

So please follow that for further information.

Thanks for reporting! 🙏

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

[timneutkens]

You can now add browserslist when enabling an experimental flag: #33227 (comment)