Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Polyfills for unsupported browsers are enabled by default [4 pull requests, 2 comments, 3 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#86785•Fetched 2026-04-08 02:09:13
View on GitHub
Comments
2
Participants
3
Timeline
19
Reactions
9
Author
BenoitHillerBenoitHiller
Participants
BenoitHillerBenoitHillerDonikaVDonikaVmayank1513mayank1513
Timeline (top)
subscribed ×7cross-referenced ×4labeled ×4commented ×2

Fix Action

Fixed

PR fix notes

PR #87065: bugfix: remove polyfills for features w/ baseline 2020

Description (problem / solution / changelog)

Since Next.js upgraded the browserslist baseline to support:

  • Chrome 111+
  • Edge 111+
  • Firefox 111+
  • Safari 16.4+

I think we can remove some of the polyfills for features that became baseline somewhere between 2018 and 2020:

  • String.trimStart/trimEnd
  • Symbol.description
  • Array.flat/flatMap
  • Promise.finally
  • Object.fromEntries

I am leaving the others, because they became baseline in 2022-2023, which is still relatively recent.

Related items

Closes: https://github.com/vercel/next.js/issues/86785 https://github.com/vercel/next.js/discussions/85815 https://github.com/vercel/next.js/discussions/64330

Changed files

  • .github/workflows/build_and_deploy.yml (modified, +14/-4)
  • .github/workflows/build_reusable.yml (modified, +10/-4)
  • .github/workflows/cancel.yml (modified, +1/-1)
  • .github/workflows/create_release_branch.yml (modified, +2/-4)
  • .github/workflows/pull_request_stats.yml (modified, +4/-0)
  • .github/workflows/release-next-rspack.yml (modified, +2/-3)
  • .github/workflows/trigger_release.yml (modified, +2/-6)
  • Cargo.lock (modified, +17/-18)
  • Cargo.toml (modified, +5/-5)
  • apps/bundle-analyzer/app/page.tsx (modified, +52/-14)
  • apps/bundle-analyzer/components/sidebar.tsx (modified, +153/-91)
  • apps/bundle-analyzer/components/treemap-visualizer.tsx (modified, +147/-37)
  • apps/bundle-analyzer/components/ui/tooltip.tsx (added, +30/-0)
  • apps/bundle-analyzer/lib/analyze-data.ts (modified, +47/-15)
  • apps/bundle-analyzer/lib/treemap-layout.ts (modified, +51/-30)
  • apps/bundle-analyzer/package.json (modified, +2/-1)
  • apps/docs/package.json (modified, +1/-1)
  • crates/napi/src/minify.rs (modified, +1/-4)
  • crates/napi/src/next_api/project.rs (modified, +1/-3)
  • crates/next-api/src/analyze.rs (modified, +5/-9)
  • crates/next-api/src/app.rs (modified, +4/-21)
  • crates/next-api/src/client_references.rs (modified, +1/-12)
  • crates/next-api/src/dynamic_imports.rs (modified, +1/-13)
  • crates/next-api/src/module_graph.rs (modified, +5/-5)
  • crates/next-api/src/next_server_nft.rs (modified, +2/-14)
  • crates/next-api/src/operation.rs (modified, +3/-36)
  • crates/next-api/src/pages.rs (modified, +4/-44)
  • crates/next-api/src/project.rs (modified, +2/-22)
  • crates/next-api/src/route.rs (modified, +4/-45)
  • crates/next-api/src/routes_hashes_manifest.rs (modified, +1/-1)
  • crates/next-api/src/versioned_content_map.rs (modified, +2/-25)
  • crates/next-api/src/webpack_stats.rs (modified, +1/-1)
  • crates/next-core/src/app_structure.rs (modified, +3/-53)
  • crates/next-core/src/hmr_entry.rs (modified, +4/-5)
  • crates/next-core/src/next_app/app_page_entry.rs (modified, +1/-2)
  • crates/next-core/src/next_app/mod.rs (modified, +0/-11)
  • crates/next-core/src/next_client/context.rs (modified, +8/-15)
  • crates/next-core/src/next_client/runtime_entry.rs (modified, +1/-1)
  • crates/next-core/src/next_client_reference/css_client_reference/css_client_reference_module.rs (modified, +5/-1)
  • crates/next-core/src/next_client_reference/ecmascript_client_reference/ecmascript_client_reference_module.rs (modified, +7/-1)
  • crates/next-core/src/next_client_reference/visit_client_reference.rs (modified, +1/-17)
  • crates/next-core/src/next_config.rs (modified, +149/-317)
  • crates/next-core/src/next_dynamic/dynamic_module.rs (modified, +6/-1)
  • crates/next-core/src/next_edge/context.rs (modified, +1/-14)
  • crates/next-core/src/next_font/font_fallback.rs (modified, +2/-2)
  • crates/next-core/src/next_font/google/font_fallback.rs (modified, +4/-6)
  • crates/next-core/src/next_font/google/mod.rs (modified, +19/-15)
  • crates/next-core/src/next_font/google/options.rs (modified, +3/-6)
  • crates/next-core/src/next_font/local/errors.rs (modified, +3/-6)
  • crates/next-core/src/next_font/local/mod.rs (modified, +8/-13)
  • crates/next-core/src/next_font/local/options.rs (modified, +3/-11)
  • crates/next-core/src/next_font/local/request.rs (modified, +0/-1)
  • crates/next-core/src/next_image/module.rs (modified, +0/-3)
  • crates/next-core/src/next_manifests/mod.rs (modified, +1/-1)
  • crates/next-core/src/next_server/context.rs (modified, +8/-15)
  • crates/next-core/src/next_server/resolve.rs (modified, +1/-4)
  • crates/next-core/src/next_server_component/server_component_module.rs (modified, +6/-1)
  • crates/next-core/src/next_server_utility/server_utility_module.rs (modified, +7/-1)
  • crates/next-core/src/next_shared/transforms/modularize_imports.rs (modified, +1/-1)
  • crates/next-core/src/next_shared/transforms/relay.rs (modified, +4/-2)
  • crates/next-core/src/next_shared/webpack_rules/mod.rs (modified, +1/-2)
  • crates/next-core/src/raw_ecmascript_module.rs (modified, +4/-7)
  • crates/next-core/src/segment_config.rs (modified, +3/-28)
  • crates/next-core/src/util.rs (modified, +3/-19)
  • docs/01-app/01-getting-started/06-cache-components.mdx (modified, +1/-1)
  • docs/01-app/02-guides/self-hosting.mdx (modified, +1/-1)
  • docs/01-app/03-api-reference/03-file-conventions/dynamic-routes.mdx (modified, +202/-1)
  • docs/01-app/03-api-reference/03-file-conventions/route.mdx (modified, +8/-0)
  • docs/01-app/03-api-reference/04-functions/generate-static-params.mdx (modified, +75/-1)
  • errors/blocking-route.mdx (modified, +17/-0)
  • errors/empty-generate-static-params.mdx (modified, +19/-10)
  • examples/basic-css/next.config.js (added, +13/-0)
  • examples/reproduction-template/package.json (modified, +2/-2)
  • lerna.json (modified, +2/-3)
  • package.json (modified, +18/-18)
  • packages/create-next-app/package.json (modified, +3/-4)
  • packages/create-next-app/templates/index.ts (modified, +1/-1)
  • packages/eslint-config-next/package.json (modified, +2/-2)
  • packages/eslint-plugin-internal/package.json (modified, +1/-1)
  • packages/eslint-plugin-next/package.json (modified, +1/-1)
  • packages/font/package.json (modified, +1/-1)
  • packages/next-bundle-analyzer/package.json (modified, +1/-1)
  • packages/next-codemod/package.json (modified, +1/-1)
  • packages/next-env/package.json (modified, +4/-4)
  • packages/next-mdx/package.json (modified, +1/-1)
  • packages/next-plugin-storybook/package.json (modified, +1/-1)
  • packages/next-polyfill-module/package.json (modified, +1/-1)
  • packages/next-polyfill-module/src/index.js (modified, +1/-117)
  • packages/next-polyfill-nomodule/package.json (modified, +1/-1)
  • packages/next-rspack/package.json (modified, +1/-1)
  • packages/next-swc/package.json (modified, +1/-1)
  • packages/next/errors.json (modified, +4/-1)
  • packages/next/package.json (modified, +8/-9)
  • packages/next/src/client/app-index.tsx (modified, +0/-1)
  • packages/next/src/client/components/app-router-headers.ts (modified, +3/-0)
  • packages/next/src/client/components/app-router-instance.ts (modified, +1/-13)
  • packages/next/src/client/components/app-router.tsx (modified, +0/-13)
  • packages/next/src/client/components/layout-router.tsx (modified, +49/-147)
  • packages/next/src/client/components/router-reducer/aliased-prefetch-navigations.ts (removed, +0/-272)
  • packages/next/src/client/components/router-reducer/apply-flight-data.ts (removed, +0/-53)

PR #87270: bugfix: remove polyfills w/ baseline 2020

Description (problem / solution / changelog)

Since Next.js upgraded the browserslist baseline to support:

  • Chrome 111+
  • Edge 111+
  • Firefox 111+
  • Safari 16.4+

I think we can remove some of the polyfills for features that became baseline somewhere between 2018 and 2020:

  • String.trimStart/trimEnd
  • Symbol.description
  • Array.flat/flatMap
  • Promise.finally
  • Object.fromEntries

I am leaving the others, because they became baseline in 2022-2023, which is still relatively recent.

Related items

Closes: https://github.com/vercel/next.js/issues/86785 https://github.com/vercel/next.js/discussions/85815 https://github.com/vercel/next.js/discussions/64330 https://github.com/vercel/next.js/issues/86562

Changed files

  • packages/next-polyfill-module/src/index.js (modified, +1/-117)

PR #88551: Turbopack: only include needed polyfills

Description (problem / solution / changelog)

Closes https://github.com/vercel/next.js/issues/86785 Closes https://github.com/vercel/next.js/pull/87270 Closes PACK-6133

For Turbpack, split up polyfills-module into separate files and include only what is necessary (and only load polyfills-nomodule if a browserslist that requires it was configured)

The output looks something like this: <img width="2560" height="273" alt="Bildschirmfoto 2026-01-14 um 18 35 18" src="https://github.com/user-attachments/assets/f83f6cba-bc3f-4651-8b14-e6628c991a18" />

Changed files

  • crates/next-api/src/app.rs (modified, +14/-37)
  • crates/next-api/src/pages.rs (modified, +18/-8)
  • crates/next-core/src/lib.rs (modified, +1/-0)
  • crates/next-core/src/polyfills.rs (added, +355/-0)
  • packages/next-polyfill-module/src/index.js (modified, +11/-179)
  • packages/next-polyfill-module/src/polyfills/array-at.js (added, +27/-0)
  • packages/next-polyfill-module/src/polyfills/array-flat.js (added, +27/-0)
  • packages/next-polyfill-module/src/polyfills/object-fromentries.js (added, +26/-0)
  • packages/next-polyfill-module/src/polyfills/object-hasown.js (added, +22/-0)
  • packages/next-polyfill-module/src/polyfills/promise-finally.js (added, +37/-0)
  • packages/next-polyfill-module/src/polyfills/string-trim.js (added, +20/-0)
  • packages/next-polyfill-module/src/polyfills/symbol-description.js (added, +22/-0)
  • packages/next-polyfill-module/src/polyfills/url-canparse.js (added, +22/-0)
  • packages/next/src/server/app-render/app-render.tsx (modified, +3/-2)
  • packages/next/taskfile-swc.js (modified, +36/-1)
  • packages/next/taskfile.js (modified, +21/-1)
  • test/e2e/app-dir/resource-url-encoding/resource-url-encoding.test.ts (modified, +1/-1)
  • test/e2e/browserslist/app/.browserslistrc (removed, +0/-1)
  • test/e2e/browserslist/app/pages/index.js (removed, +0/-22)
  • test/e2e/browserslist/browserslist.test.ts (removed, +0/-46)
  • test/e2e/browserslist/default-target.test.ts (removed, +0/-46)
  • test/production/escheck-output/index.test.ts (modified, +112/-30)

PR #43066: [docs] Remove unnecessary polyfills, reduce unused CSS, and fix accessibility issues

Description (problem / solution / changelog)

Why

<!-- Please describe the motivation for this PR, and link to relevant GitHub issues, forums posts, or feature requests. -->

Fix ENG-19409

Lighthouse flags ~34.5 KiB of legacy JavaScript polyfills on every page of docs.expo.dev. Next.js unconditionally injects polyfills for APIs like Array.prototype.at, Object.hasOwn, and URL.canParse regardless of browserslist config. All of these are natively supported by every browser we target (Chrome 93+, Firefox 92+, Safari 15.4+).

Additionally, ~19 KiB of CSS was loaded globally but only used by specific components, and a few accessibility issues were flagged (missing button labels, insufficient color contrast).

The following is the final Lighthouse score on docs.expo.dev homepage:

<img width="2388" height="344" alt="CleanShot 2026-02-11 at 17 23 20@2x" src="https://github.com/user-attachments/assets/5cfd55f9-60dc-47d7-9b3a-6601369a262d" /> <img width="2398" height="2014" alt="CleanShot 2026-02-11 at 17 23 28@2x" src="https://github.com/user-attachments/assets/b5243f6d-8641-4dd3-8598-1690e3238586" />

How

<!-- How did you build this feature or fix this bug and why? -->

Remove Next.js built-in polyfills (12.4 KiB JS saved)

Uses a webpack NormalModuleReplacementPlugin to replace Next.js's built-in polyfill-module.js with an empty file on client builds. Neither browserslist nor resolve.alias work for this because Next.js hardcodes a relative require() path that bypasses both. This is a known limitation (vercel/next.js#86785).

Move component-specific CSS to component level (~3.2 KiB CSS saved)

Three CSS imports were loaded globally in _app.tsx but only used by specific components:

  • @xyflow/react/dist/style.css (18.5 KiB) -> ConfigPluginHierarchy (3 pages under /config-plugins/)
  • yet-another-react-lightbox/styles.css (5.6 KiB) -> LightboxImage
  • tippy.js/dist/tippy.css (1.4 KiB) -> code.tsx

Fix accessibility issues

  • Added aria-label to icon-only buttons (hamburger menu, banner dismiss)
  • Changed "Start Tutorial" button background from palette-blue10 (3.59:1 contrast) to palette-blue11 (4.78:1 contrast) to pass WCAG AA

Test Plan

<!-- Please describe how you tested this change and how a reviewer could reproduce your test, especially if this PR does not include automated tests! If possible, please also provide terminal output and/or screenshots demonstrating your test/reproduction. -->
  • Run yarn build and it should succeed with no errors
  • Homepage: main chunk no longer appears in Lighthouse "Legacy JavaScript" audit, "Reduce unused CSS" audit shows reduced savings, and no Lighthouse accessibility warnings for button labels or contrast.
    • Accessibility: "Start Tutorial" button looks correct in light and dark mode
    • All of this can be done via rm -rf .next out && yarn build and then run npx serve out.
    • Then, open localhost:3000 in an Incognito window (to ensure no third-party extensions are running). Go to the Lighthouse tab in the developer tool and analyze the page for Desktop.
  • Pages with images: lightbox opens and displays correctly
  • Pages with code blocks: tippy tooltips render correctly
  • General navigation, search, and interactive components work as expected

Lighthouse score after above improvements:

<img width="2408" height="482" alt="CleanShot 2026-02-11 at 17 20 22@2x" src="https://github.com/user-attachments/assets/2a9a73f2-4fe0-404e-8ddb-9dc1e241a08c" /> <img width="2402" height="998" alt="CleanShot 2026-02-11 at 17 20 32@2x" src="https://github.com/user-attachments/assets/d8ef1b0e-79ff-46e3-828c-c9aa4a907347" /> <img width="2390" height="1398" alt="CleanShot 2026-02-11 at 17 20 38@2x" src="https://github.com/user-attachments/assets/4e7040d9-a04c-43f5-8a5c-5d54c4901455" />

Checklist

<!-- Please check the appropriate items below if they apply to your diff. -->

Changed files

  • docs/components/base/code.tsx (modified, +1/-0)
  • docs/empty-polyfill.js (added, +3/-0)
  • docs/next-env.d.ts (modified, +1/-1)
  • docs/next.config.ts (modified, +13/-1)
  • docs/pages/_app.tsx (modified, +0/-3)
  • docs/ui/components/AppJSBanner/index.tsx (modified, +1/-0)
  • docs/ui/components/ConfigPluginHierarchy/index.tsx (modified, +1/-0)
  • docs/ui/components/ContentSpotlight/LightboxImage.tsx (modified, +1/-0)
  • docs/ui/components/Header/Header.tsx (modified, +1/-0)
  • docs/ui/components/Home/sections/QuickStart.tsx (modified, +1/-1)

Code Example

{
  "browserslist": ["chrome 111", "edge 111", "firefox 111", "safari 16.4"]
}

---

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
RAW_BUFFERClick to expand / collapse

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
<img width="710" height="496" alt="Image" src="https://github.com/user-attachments/assets/93c00966-75f6-4b34-b5c2-45f6fe249b49" />

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 https://github.com/vercel/next.js/discussions/64330 for examples of people noticing this issue in production.

extent analysis

TL;DR

Remove unnecessary Legacy JavaScript polyfills by configuring the browserslist to only include polyfills required by the supported browsers.

Guidance

  • Review the browserslist configuration to ensure it only includes browsers that require the polyfills being loaded.
  • Check the next-polyfill-module code to identify which polyfills are being loaded and verify if they are necessary for the supported browsers.
  • Consider updating the next-polyfill-module to only include polyfills that are required by the current supported browsers.
  • Investigate the possibility of using a dynamic polyfill loading approach to only load polyfills when necessary.

Example

No code snippet is provided as the issue is related to configuration and polyfill management.

Notes

The issue is specific to the Next.js application and its polyfill management. The solution may require updates to the next-polyfill-module or changes to the browserslist configuration.

Recommendation

Apply a workaround by updating the browserslist configuration to only include polyfills required by the supported browsers, as this is a more targeted approach to resolving the issue without requiring significant changes to the next-polyfill-module.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#generation error#database connection#vector store#embedding generation#cache error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING

nextjs - ✅(Solved) Fix Polyfills for unsupported browsers are enabled by default [4 pull requests, 2 comments, 3 participants]