Why deleted experimental: { browsersListForSwc: true, legacyBrowsers: false }?

[popuguytheparrot]

Summary

Why deleted this flags? I dont need polyfill chunk

experimental: {
   browsersListForSwc: true,
   legacyBrowsers: false
}

Additional information

No response

Example

No response

[icyJoseph]

What is it that you want to do again? Not support older browsers? I think you can configure that, https://nextjs.org/docs/architecture/supported-browsers#browserslist

• PR: BREAKING CHANGE: Remove browsersListForSwc and change default to legacyBrowsers: false #41529
• RFC: RFC: Change default JS/CSS output to target modern browsers #33227

[icyJoseph]

is that being downloaded to the browser? what polyfills does it have? I think Next.js has some browser polyfills it prepares in case they are used by some of your code, or needed by the browser, but generally, you probably dont see polyfills-423...js in the network tab of what's send to the browser. Can you confirm that?

A site I own for example, only downloads these, in spite of the polyfills chunks generated at build time.

[popuguytheparrot]

No, because nomodule attribute is used.

My thoughts are that why even have it if I'm 100 percent sure which platform it will run on. Wouldn't it be better not to waste time generating this html at all and build time inserting on polyfills?

[gndelia]

@icyJoseph I created an empty project, using the app router. Only next, react and react-dom - nothing else. I created a hello world, and I'm using static export. My config is only

/** @type {import('next').NextConfig} */
module.exports = {
  output: 'export',
  reactStrictMode: true,
}

After building with next build, and serving using serve, I checked the site using Lighthouse in the browser, and I get the following warning about see some polyfills being sent

Indeed, by clicking that chunk file, I see something like this

Array.prototype.flatMap = function(e, t) {
            return this.map(e, t).flat()
        }
        ),
        Promise.prototype.finally || (Promise.prototype.finally = function(e) {
            if ("function" != typeof e)
                return this.then(e, e);
            var t = this.constructor || Promise;
            return this.then(function(r) {
                return t.resolve(e()).then(function() {
                    return r
                })
            }, function(r) {
                return t.resolve(e()).then(function() {
                    throw r
                })
            })
        }
        ),
        Object.fromEntries || (Object.fromEntries = function(e) {
            return Array.from(e).reduce(function(e, t) {
                return e[t[0]] = t[1],
                e
            }, {})
        }
        ),
        Array.prototype.at || (Array.prototype.at = function(e) {
            var t = Math.trunc(e) || 0;
            if (t < 0 && (t += this.length),
            !(t < 0 || t >= this.length))
                return this[t]
        }
        ),

and this file is being downloaded

I tried many combinations of .browserslist, .browserlist files or browserlist option in the package.json but with no success. These are always being sent. Note that they are not part of the polyfill-* chunk, but of a chunk sent by the app.

Is there a way that these can be removed? Note that the browserlist seems to be ignored. See also #64330

Let me know if you prefer a repo to reproduce the issue.

Thanks! 🙏🏽

[icyJoseph]

I think, if you want to remove them because lighthouse says so, it is probably not worth chasing. I've run into problems before, where some high value customer would show up telling me that our site didn't load for them, because we had updated our polyfills, and their workers didn't have access to latest browsers.

Lighthouse seems to have added these, relatively recently too, GoogleChrome/lighthouse#16366

We have this module, https://github.com/erfanium/next.js/blob/canary/packages/next-polyfill-module/src/index.js that , which is what you are getting. We import that in our internal components that wrap the Next.js core shell, so AFAIK, you can't remove them, for now.

Take these results with a grain of salt, as well as my answer. You are the dev, it is your call.

We added .hasOwn #60437 relatively recently too. As you can see, the PR got some engagement.

From our side, we can try to schedule a review, or see if these are really worth still having as polyfill.

As a coincidence I am working on documenting doing polyfill in App Router, so I'll ask around if we can drop some of these, but .at, .hasOwn ~ mmm hard calls, I just know that there'll be some devs who would run into issues.

• Also, Next.js tries to support as wide range of browsers: https://nextjs.org/docs/architecture/supported-browsers#polyfills

[gndelia]

Thanks for your response. I work on a crypto app, so as users must use certain wallets (chrome extensions) to operate and because of these, in general, the expectation is that the browser supported won't be that old. I understand some of these polyfills may still be useful; however, others, such as Object.fromEntries (supported in all major browsers since 2020), or Array.flat() feel redundant, and we believe we can get rid of them.

It's not a hard requirement, but it is something we were taking a look at, and were wondering if the option to do so worked. I do understand that next in this case is targeting a wide range of browsers, it's just that we're targeting some a bit more modern than what you offer.