Next.js doesn't respect Browserslist

[jaydenseric]

Out of the box, defining a browserslist query the standard ways in your project (e.g. via a package.json browserslist field) is not respected by Next.js for builds.

I see people hardcoding a query into the Next.js Babel preset config, like this:

https://github.com/zeit/next.js/blob/fa5be4971ad1a3fb8f6214d8f21cc03ca60d6457/test/integration/babel-custom/fixtures/targets-string/.babelrc#L7

But that is a poor solution as Browserslist won't find the query for other tools (e.g. ESLint plugins).

I'm not even sure what it does, since Next.js customises the @babel/preset-env targets for the server build, and maybe differently for 2 versions of the client build (modern?) but that's not documented anywhere. Does Next.js respect your query, but then exclude more targets on top, or does it totally ignore it?

Ideally we should be able to specify our Browserslist queries the standard ways, and Next.js will never add targets on top of it - only intersect that query and possibly reduce the number of targets as a result for the special builds.

[jaydenseric]

@babel/preset-env usually lets Browserslist retrieve the query if the targets option is not specified:

https://babeljs.io/docs/en/babel-preset-env#browserslist-integration

I tried this Babel config:

{
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          "targets": null
        }
      }
    ]
  ]
}

And it seems to cause the package.json browserslist field to be used, but I'm not sure if this will break the way Next.js makes the separate builds. I'm trying to read through the source code and it's not intuitive.

[diakonos]

This workaround no longer seems to work due to:

next.js/packages/next/build/babel/preset.ts

Lines 89 to 104 in 497cac4

	// When transpiling for the server or tests, target the current Node version
	// if not explicitly specified:
	if (
	(isServer || isTest) &&
	(!presetEnvConfig.targets ||
	!(
	typeof presetEnvConfig.targets === 'object' &&
	'node' in presetEnvConfig.targets
	))
	) {
	presetEnvConfig.targets = {
	// Targets the current process' version of Node. This requires apps be
	// built and deployed on the same version of Node.
	node: 'current',
	}
	}

It would be great for a normal browserslist configuration in package.json or any other officially supported method to be respected.

[xyy94813]

next.js/packages/next/build/babel/preset.ts

Lines 91 to 97 in f658b76

	) {
	presetEnvConfig.targets = {
	// Targets the current process' version of Node. This requires apps be
	// built and deployed on the same version of Node.
	node: 'current',
	}
	}

By default @babel/preset-env will use browserslist config sources unless either the targets or ignoreBrowserslistConfig options are set.

It seems we can use browserslistrc...

[feross]

Is there a more official solution to this issue yet?

Here's what we're doing, but it feels extremely brittle since Next.js can change how it uses targets or whether to obey or override that option at any time.

const { readFileSync } = require('fs')
const { join } = require('path')

const browsersList = readFileSync(
  join(__dirname, '.browserslistrc'), 'utf8'
).split('\n')

// Next.js should use the .browserslistrc file
module.exports = {
  presets: [
    [
      "next/babel",
      {
        "preset-env": {
          targets: browsersList
        }
      }
    ]
  ]
}

[jaydenseric]

Guys, can you please all upvote this discussion by pressing the arrow at the top left of the discussion (on desktop):

Right now, 18 people have thumbed it but no one has actually upvoted the discussion to bring it to the attention of the wider community or Next.js team:

Also a side note, the GitHub design is a bit stupid I can only add a comment to this "discussion" by pressing a button called "Answer":

[ismay]

I think the issue I've just filed might be related to this discussion: #23658. Next.js' autoprefixer setup is not adding the vendor prefixes you'd expect based on the browserslist in package.json (see issue for details).

[timbicker]

I think it is already possible like this in babel.config.js

const { NODE_ENV } = process.env;

const prod = NODE_ENV === "production";
const dev = NODE_ENV === "development";

module.exports = {
  "presets": [
    [
      "next/babel",
      {
        "preset-env": {
          targets: prod ? "defaults" : [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
          ]
        }
      }
    ]
  ]
}

Or am I missing something? See also the docs here: https://nextjs.org/docs/advanced-features/customizing-babel-config

I have not checked if it works because I did it just now, but I feel like the time to spin up the dev server is faster, so I think it worked.

[ismay]

That's already mentioned in the top comment. It's a workaround, rather than a fix to next.js not respecting the root browserslist config. As said in the top comment, with this workaround other tools won't pick up on the configuration.

[yangmingshan]

Seems now Next.js (Babel) will respect Browserslist.

[lourd]

As of this writing, Next.js 12.0.7 does automatically use browserslist targets from config specified in a package.json file, but it still does not do so with the .browerslistrc file. You can see this by setting the debug option for preset-env .babelrc:

{
    "presets": [
      [
        "next/babel",
        {
          "preset-env": {
            "debug": true
          }
        }
      ]
    ],
  }

[pie6k]

@yangmingshan I think it still does not work (browserslist not respected).

Also you mention .bebelrc file which switches from swc to babel compiler. With babel compiler it works, with swc (which is default now) it does not.

Steps to reproduce:

yarn create next-app --typescript

in _app.tsx write

class FooSuper {
  async aa() {
    await "foo"
    console.log("foo super")
  }
}

console.log(FooSuper);

(or any 'modern' js code)

add to package.json

  "browserslist": [
    "Chrome 94"
  ]

run yarn build

Check build files for client and look for foo super

---

result: added _app code is bundled to something like this:

e=n,(r=[{key:"aa",value:function(){return(n=o().mark((function n(){return o().wrap((function(n){for(;;)switch(n.prev=n.next){case 0:return n.next=2,"foo";case 2:console.log("foo super");case 3:case"end":return n.stop()}}),n)}))

expected result: I'd expect es6 class and native 'async/await' to be in client-side bundle as it is supported in defined browserslist query

[thexpand]

@pie6k I think it's because you're still using the SWC compiler, i.e. you have to opt out. The simplest way would be to add an empty .babelrc file.

[pie6k]

Thanks for pointing out - the point is I am aware of that and I'd prefer to use SWC for performance reasons.

[thexpand]

Fair enough. I was already having a custom .babelrc file with configuration for styled-components, as I'm waiting for a stable version of SWC plugin for styled-components. So, I had nothing to loose anyhow.

[trm217]

Does anyone have an idea on how this is handled with SWC? The browserslist key in package.json seems to have no effect and neither does having a custom config in .swcrc as metioned in the swc docs…

[rmales]

I was looking into this myself and the best answer I could find was #33985 (comment), which basically seems to say Browserlist config isn't supported with SWC in Next for JS.

[timneutkens]

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

[shay-alaluf]

Did someone find an actually solution? I have next 12.3 with swc with styled-jsx and somehow it works only on the latest versions of browsers (in all platform) and in other versions there are style breaks