-
Notifications
You must be signed in to change notification settings - Fork 30k
Description
Link to the code that reproduces this issue
https://codesandbox.io/p/devbox/lucid-kirch-qm6y6g?workspaceId=ws_YGJRKdEKng1kurcxFGU5DV
To Reproduce
- Start the application (in any mode)
- Run the Lighthouse tool in Chrome DevTools
- Note in the Insights section that there is a report about a number of Legacy JavaScript polyfills being sent
Note: the replication attached is just an unchanged copy of the provided replication template repository. You can see this issue on all nextjs applications running any version since these polyfills were added.
Current vs. Expected behavior
The polyfills noted should only be included if the user has requested them. Even in that case it could be argued that the user should be the one providing polyfills needed to support a wider ranger of browser versions, as would be the case if they wanted to handle cases requiring additional polyfills on top of the ones listed.
This claim is based on reviewing the code for these polyfills over in packages/next-polyfill-module/src/index.js and noting that the ones that Lighthouse is warning about all require browser versions older than any item in the current list of supported browsers:
{
"browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"]
}This is making the assumption that the current recommendation for loading polyfills would allow for loading them early enough to ensure nothing breaks, but if that isn't the case then that is a problem in and of itself.
Provide environment information
Operating System:
Platform: linux
Arch: x64
Version: #1 SMP PREEMPT_DYNAMIC Sun Aug 6 20:05:33 UTC 2023
Available memory (MB): 4102
Available CPU cores: 2
Binaries:
Node: 20.12.1
npm: 10.5.0
Yarn: 1.22.19
pnpm: 8.15.6
Relevant Packages:
next: 16.1.0-canary.12 // Latest available version is detected (16.1.0-canary.12).
eslint-config-next: N/A
react: 19.2.1
react-dom: 19.2.1
typescript: 5.9.3
Next.js Config:
output: N/AWhich area(s) are affected? (Select all that apply)
Performance, Turbopack, Webpack
Which stage(s) are affected? (Select all that apply)
next dev (local), next build (local), next start (local), Vercel (Deployed), Other (Deployed)
Additional context
Note that of the polyfills currently in next-polyfill-module the only one that should be required by the current supported browsers is also the only one that Lighthouse doesn't mention, which is URL.canParse.
This is taking into account that a few of the comments stating Edge: never don't match the values on the linked caniuse.com pages.
I imagine that this will continue being a problem in the future as other polyfills go out of date, but I won't suggest at this point that substantial effort be made to have the build configuration checking the browserslist when choosing which polyfills to include rather than the current solution building them in.
See #64330 for examples of people noticing this issue in production.