vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.72k stars 26.84k forks source link

SyntaxError with Middle Dot (U+30FB) as Object Key in Older iOS Safari Versions #69854

Open bubble0601 opened 1 month ago

bubble0601 commented 1 month ago

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/tender-sun-8ygrks

To Reproduce

  1. Create a Next.js project using version 14.2.5 or newer.
  2. Use an object with the middle dot character (・, U+30FB) as a key in your JavaScript code.
  3. Build your project and serve it.
  4. Access the site using an older version of iOS Safari (e.g., Safari 17.1).
  5. Observe that you encounter a SyntaxError: Invalid character '\u30fb' and the script fails to load.

Current vs. Expected behavior

Current Behavior: In iOS Safari 17.1 and older, you encounter a SyntaxError due to the middle dot character not being properly quoted in the minified JavaScript output. This error occurs because the middle dot is now identified as a new identifier character in Unicode, which older browsers may not handle correctly.

Expected Behavior: Next.js is expected to support Safari 12 and newer. Therefore, the JavaScript output should correctly handle the middle dot character by quoting it, ensuring compatibility with Safari 12 and above.

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.6.0: Mon Jul 29 21:16:46 PDT 2024; root:xnu-10063.141.2~1/RELEASE_ARM64_T8112
  Available memory (MB): 24576
  Available CPU cores: 8
Binaries:
  Node: 20.16.0
  npm: 10.8.1
  Yarn: 1.22.22
  pnpm: 7.29.3
Relevant Packages:
  next: 14.2.5 // There is a newer version (14.2.8) available, upgrade recommended! 
  eslint-config-next: 13.4.9
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.1.6
Next.js Config:
  output: export

Which area(s) are affected? (Select all that apply)

SWC, Webpack

Which stage(s) are affected? (Select all that apply)

Other (Deployed)

Additional context

polamjag commented 5 days ago

Maybe duplicate of https://github.com/vercel/next.js/issues/65237?

According to this, the https://github.com/vercel/turborepo/commit/a56214480242960a36ad6940ce6c5e84664e8705 and https://github.com/vercel/next.js/pull/65450 appear to fix this issue, and these versions include this fix: