Skip to content

Polyfills for unsupported browsers are enabled by default #86785

@BenoitHiller

Description

@BenoitHiller

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/lucid-kirch-qm6y6g?workspaceId=ws_YGJRKdEKng1kurcxFGU5DV

To Reproduce

  1. Start the application (in any mode)
  2. Run the Lighthouse tool in Chrome DevTools
  3. Note in the Insights section that there is a report about a number of Legacy JavaScript polyfills being sent
Image

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/A

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    PerformanceAnything with regards to Next.js performance.TurbopackRelated to Turbopack with Next.js.WebpackRelated to Webpack with Next.js.linear: turbopackConfirmed issue that is tracked by the Turbopack team.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions