8000 Next bundles language features newer than what browserlist should allow · Issue #45473 · vercel/next.js · GitHub
[go: up one dir, main page]

Skip to content

Next bundles language features newer than what browserlist should allow #45473

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
1 task done
karl-run opened this issue Feb 1, 2023 · 7 comments
Open
1 task done
Labels
bug Issue was opened via the bug report template. SWC Related to minification/transpilation in Next.js.

Comments

@karl-run
Copy link
karl-run commented Feb 1, 2023

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

    Operating System:
      Platform: linux
      Arch: x64
      Version: #64-Ubuntu SMP Thu Jan 5 11:43:13 UTC 2023
    Binaries:
      Node: 16.19.0
      npm: 8.19.3
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.1.7-canary.1
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

SWC transpilation

Link to the code that reproduces this issue

https://github.com/karl-run/next-bundle-bug-repro

To Reproduce

  1. Build the linked repro repo: yarn && yarn build
  2. Observe that the output file .next/static/chunks/pages/index-<hash>.js has the following operator: ?. included in the bundle.

Describe the Bug

When a library ships unsupported language features, for example optional chaining operator (not supported on Safari 12), Next will still bundle this operator, even though the default browser list says Safari 12+.

A more specific scenario is that filter-obj uses the optional chaining operator, and this was accidentally included in our bundle as part of a transitive of a transitive of a transitive dependency, so users on older iPhones suddenly started seeing white pages (except for the parts that were SSR-ed).

I have checked the behavior of other build pipelines, and default Vite and CRA setups both transpile away this operator when building for production.

We feel that this is a pretty serious bug, because it happens without any warning/crashing build. Even if the build would yell at me, so I could add transpilePackages: ['filter-obj'] to next.config.js. But as it stands today, I won't know until someone discovers it.

Expected Behavior

That no language features above what browserlist should allow end up in my production bundle, even though it comes from a library.

@karl-run karl-run added the bug Issue was opened via the bug report template. label Feb 1, 2023
@github-actions github-actions bot added the SWC Related to minification/transpilation in Next.js. label Feb 1, 2023
@karl-run
Copy link
Author

I updated the repro to use the latest next canary (13.1.7-canary.21). The issue is still there.

@Kartik4152
Copy link

@karl-run Did you resolve this? Facing the same issue, we're at next(13.0.0)

@karl-run
Copy link
Author
karl-run commented May 4, 2023

It's still an issue. It actually caused some downtime for Safari 12 users again because filter-obj snuck it's way into a different app through a transitive dependency. 😩

@karl-run
Copy link
Author
karl-run commented May 4, 2023

Upgraded the repro to the newest next canary (13.3.5-canary.9). Issue is still there:

image

@karl-run
Copy link
Author

This is still an issue.

I've had to be creative, because we don't notice right away when a dependency or transitive dependency breaks the app for Safari 12 users.

https://github.com/navikt/sykmeldinger/pull/376/files

@felixsline
Copy link

I still have this issue.
I need to ask manually for packages transpilation with transpilePackages, but it doesn't seem really scalable and resilient...

@awr
Copy link
awr commented May 29, 2025

I'm running into the same issue -- using es-check is one way I'm trying to identify. But even a vanilla app created on v15 seems to illustrate the issue: https://github.com/mobius-academy/transpile-repro

The check is to run yarn es-check, which could easily be pulled into a CI pipeline.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Issue was opened via the bug report template. SWC Related to minification/transpilation in Next.js.
Projects
None yet
Development

No branches or pull requests

4 participants
0