[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.

[Umuts-Codes]

Hi,

marcoms and BilalAhmed-358. First of all I have tried reply to solve problem for question's owner abaracedo. And I have used and tried mine all of skills part that's all. How you are thought about this questions answer from AI ? I didn't understand.

I have written down this title • Summary - also I have choosen yesterday this is came to yours AI ? Hmm interesting. When I have written down like the this • Summary - I have thought mark up side subject title my friends. This kind of writing created and image AI so sorry about that.

Let me type one more thing If you are don't like the my own solution message, you are can be ignore or reject whatever if you are want it is ok for me.

Have a good days.

[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.