Next bundles language features newer than what browserlist should allow

karl-run commented 1 year ago

Verify canary release

[X] 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

Build the linked repro repo: yarn && yarn build
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 commented 1 year ago

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

Kartik4152 commented 1 year ago

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

karl-run commented 1 year ago

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. :weary:

karl-run commented 1 year ago

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

karl-run commented 1 year ago

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

vercel / next.js