[App Router] CWV Avoid sending legacy JS to modern browsers - how to remove next.js polyfills

[abaracedo]

Summary

When I run Lighthouse on my application I get a warning to avoid serving legacy JS in modern browsers. Looking into the details I see the code references polyfills to Object.entries() and the @babel/plugin-transform-classes is used.

I'd tried to set a custom browserlist configuration to point to more up to date browser's versions and after running CWV I still get the same warning.

Is it possible to remove that polyfills?

Additional information

No response

Example

No response

[bbaymistery]

did u find solution
it is been 4 days i am struggling find out solution
i run into the same issue

[Gavrushuk]

Any updates on this topic?

[RastogiAnmol]

any updates?

[Tajammal-Maqbool]

any update?

[bbaymistery]

any update?

still looking for answer

[FlyingGrasss]

I looked around but to no avail

[BilalAhmed-358]

Any update on this topic? it has been open for like >1 year at this point 👀

[morandalex]

no answer here ? ....

[De-Santa]

Same interest here. In bundle I see import with polyfills from node_modules/next/dist/build/polyfills/polyfill-module.js, but found no options how to avoid it.

[Umuts-Codes]

You are correct that Next.js includes some legacy JavaScript polyfills to ensure compatibility across a wide range of browsers. This can trigger Lighthouse warnings even if you are targeting modern browsers.

• How to address this -

1. Update Browserslist configuration:

   • Ensure your browserslist in package.json or .browserslistrc targets only modern browsers. Example:

"browserslist": [
  "last 2 Chrome versions",
  "last 2 Firefox versions",
  "last 2 Safari versions",
  "last 2 Edge versions"
]

• This will guide Next.js and Babel to avoid unnecessary legacy transforms.

2. Disable unnecessary polyfills:

   • Next.js automatically injects polyfills via Babel. You can customize this by modifying next.config.js:

const nextConfig = {
  experimental: {
    modern: true,
    polyfillsOptimization: true
  }
}

module.exports = nextConfig;

• modern: true enables modern builds for supporting browsers.
• polyfillsOptimization: true ensures that only required polyfills are included.

3. Audit dependencies:

   • Some polyfills may come from third-party libraries. Check node_modules or inspect bundle size with next build && next analyze to identify and remove unnecessary polyfills.

4. Consider using use client and dynamic imports:

   • For client-only code or modern features, mark components with "use client" and leverage dynamic imports to isolate legacy polyfills from server-rendered code.

• Summary -

By tightening your Browserslist targets, enabling Next.js modern builds, and auditing dependencies, you can reduce or eliminate legacy JS polyfills, satisfying Lighthouse requirements while maintaining compatibility for modern browsers.

[marcoms]

We appreciate that you want to help it's just that to be honest when I first read your message it gave me false hope that we had a solution 😅

I am a bit confused - are you saying that message was not AI? It seems the writing style between your recent message and the previous one is very different

If it is not AI:

Since the response speaks with a lot of authority "you are correct that ...", it gives the impression that you have found/tested these solutions yourself, but it seems that they just don't work, based on other people's replies

If it is AI:

The issue has been open for 2 years so it's unlikely that an AI answer would be able to resolve something that people have been looking into for so long

Also, some people are not so good at knowing whether a response is AI or not. I would suggest marking such a response "here's what ChatGPT told me", or better - to test the response and rewrite it in your own words

[cbratschi]

AI was using this source: https://arnab-k.medium.com/exploring-advanced-performance-optimization-in-next-js-1b8eb32ce147.

[Umuts-Codes]

marcoms,

As you said to me you were a bit confused that the moment and makes me suprised little reason why I don't know. And you have written down to me appreciated to me for help out this subject you're welcome. However, you shouldn't have feels false hope for solutions anways.

1- When you replied to me I'm responding last time at the moment now cause I already replied a few days ago but it is not very enough openly probably anyway. First of all, Thank you for given to me deserved. I'm tried show up to mine answer with all my best skills. And When I was searching for the main titles here I have seen this page after wise I tried own brave for solve out it's has been 2 years issue here but I hadn't. However, I can't do anything after the this moment.

2- Yes, I have seen that this issue has been open for 2 years, and I’m aware that an AI answer is unlikely to magically solve something that has remained unresolved for that long. But that’s also why I didn’t understand why you assumed my message was AI in the first place. Honestly, that part felt a bit strange.

Some people can easily recognize an AI-generated answer, and some cannot — this is something people still argue about. I shared my answer because I genuinely tried to help and suggested a possible approach, but as it didn’t work, there is nothing more I can do.

And finally, the issue owner still hasn’t found a solution after 2 years and didn’t reply to my message at all. Instead, you responded — which is also a bit unusual, but anyway.

[FlyingGrasss]

Umuts-Codes, thank you for trying your best at helping us, we really appreciate it, but here's a tip: we usually test the solution ourselves and then share it with other people if it works for us or if we're on the right track but we need a bit of help. And It's best to be honest, no matter the context, i appreciate your intention, but please don't go around submitting solutions which you haven't tested yourself, and on the AI part, you say that it isn't AI, and I want to believe you, but the structure of the message and the nonexistent syntax which was used in the solution you gave is something AI does quite often, called hallucination, so make sure that answers from AI aren't hallucinations before believeing them and sharing them with other people. I don't mean any harm to you and I am not judging you, just a tip so that you don't experience problems in the future. My best regards.

[pbs-jmo]

I tried this before reading all the comments. Waste of time. Doesn't work.

[BenoitHiller]

So I ran into what I suspect is the same error but I do note that Object.entries() is not currently one of the functions that it complains about being an unnecessary polyfill.

Currently I see it complain about the functions contained in /packages/next-polyfill-module/src/index.js.

When using turbopack you can resolve the issue by adding the following settings in your next.config.js

import path from 'path';
import os from 'os';

const nextConfig = {
  transpilePackages: ['next'],
  turbopack: {
    resolveAlias: {
      '../build/polyfills/polyfill-module': path.relative(os.devNull, __dirname)
    },
  }
};

This causes turbopack to transpile the next source and replace the one import that exists for ../build/polyfills/polyfill-module with an empty file(there is likely a clearer path you could specify here, but this one works at least).

Warnings

You probably want to think twice about using this in production. It relies on next internals that are allowed to change at any time.

On top of which nulling out a package like this doesn't have great support in turbopack, which is why there is the os.devNull stuff to get an empty file(it is probably clearer to just make a file called empty.js). If you are using webpack you can just alias things to false to get this same effect (there is a deprecated null-loader that might work in turbopack if you don't mind a dependency).

I also have no idea if transpiling next has other consequences. I would be kind of surprised if it didn't with everything involved in the build process.

Alternative

Right now it seems like only the URL.canParse polyfill is from a browser version outside of the browserslist used by nextjs. So it might be worth putting in a bug asking to at least delete all of the others.

[spacerrsdreams]

Any update on this?

[lluz]

Still waiting for the solution for this problem. Webvitals keeps kicking me in the butt with this.

[314systems]

I've identified the cause. The issue is that next-pollyfill-module loads polyfills without conditional statements. We'll be able to improve this by using core-js-compat libraries instead.

https://github.com/vercel/next.js/blob/canary/packages/next-polyfill-module/src/index.js

[alphajew420]

// Replace Next.js polyfills with empty file for modern browsers (saves ~14KB)
11 + turbopack: {
12 + resolveAlias: {
13 + '../build/polyfills/polyfill-module': './src/lib/modern-polyfill.js',
14 + 'next/dist/build/polyfills/polyfill-module': './src/lib/modern-polyfill.js',
15 + },
16 + },

try adding this to your config, it worked for me to remove the issues.

[pbs-jmo]

// Replace Next.js polyfills with empty file for modern browsers (saves ~14KB) 11 + turbopack: { 12 + resolveAlias: { 13 + '../build/polyfills/polyfill-module': './src/lib/modern-polyfill.js', 14 + 'next/dist/build/polyfills/polyfill-module': './src/lib/modern-polyfill.js', 15 + }, 16 + },

try adding this to your config, it worked for me to remove the issues.

@alphajew420 This goes in the top level of the next.config? I added those lines and it made no difference. Lighthouse still fails for legacy js.

[lluz]

In my case it does work!
No more "Legacy JavaScript" on Lighthouse test results.
Thank you @alphajew420 !

[morandalex]

@lluz can you share your next config as example ? thanks

[lluz]

@morandalex Here you go, nothing fancy, just added the turbopack group, and the empty file 'modern-polyfill.js' to the 'src/lib/others' folder:

`
/** @type {import('next').NextConfig} */

const nextConfig = {
reactStrictMode: true, // Disable strict mode to prevent double API calls in dev
target: 'server',
output: process.env.BUILD_STANDALONE === "true" ? "standalone" : undefined,
turbopack: {

resolveAlias: {

  /* 
  Legacy JavaScript prevention (origin: Lighthouse test results)
  (Polyfills and transforms enable older browsers to use new JavaScript features. 
  However, many aren't necessary for modern browsers.)
  */
  '../build/polyfills/polyfill-module':         './src/lib/others/modern-polyfill.js',
  'next/dist/build/polyfills/polyfill-module':  './src/lib/others/modern-polyfill.js',

},

},
sassOptions: {
... ... ...
`