vercel / next.js

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

Missing of `.replaceAll()` polyfill #56958

Open An-Cu opened 11 months ago

An-Cu commented 11 months ago

Link to the code that reproduces this issue

https://github.com/An-Cu/replace-all-next-polyfill

To Reproduce

  1. Use one of browser which is not supporting .replaceAll(), but it's mentioned as supported by default by next.js e.g. Firefox v67-76 or Chrome v 64-84
  2. Use the .replaceAll() in you next page component. Try supported-browsers page fro example.
  3. Check console for app crash.

Current vs. Expected behavior

The supported by default by next.js browsers which does not have replaceAll feature should work without app crash in places where replaceAll is used.

Verify canary release

Provide environment information

Operating System:               
  Platform: win32               
  Arch: x64                     
  Version: Windows 10 Enterprise
Binaries:                       
  Node: 18.16.1                 
  npm: N/A                      
  Yarn: N/A                     
  pnpm: N/A                     
Relevant Packages:              
  next: 13.5.6-canary.2         
  eslint-config-next: 13.5.4    
  react: 18.2.0                 
  react-dom: 18.2.0             
  typescript: 5.2.2             
Next.js Config:                 
  output: N/A

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

Not sure

Additional context

No response

Spovis commented 7 months ago

Encountering the same problem

childrentime commented 2 months ago

bump

Edit by maintainer bot: Comment was automatically minimized because it was considered unhelpful. (If you think this was by mistake, let us know). Please only comment if it adds context to the issue. If you want to express that you have the same problem, use the upvote 👍 on the issue description or subscribe to the issue for updates. Thanks!

nhducit commented 1 month ago

from the documentation

If any of your dependencies include these polyfills, they’ll be eliminated automatically from the production build to avoid duplication.

In addition, to reduce bundle size, Next.js will only load these polyfills for browsers that require them. The majority of the web traffic globally will not download these polyfills.

You can add the required polyfills for your and by following the instruction here

An-Cu commented 1 month ago

@nhducit thanks for info, I had used this workaround immediately when I discovered the issue. The problem is that next.js declares:

Next.js allows you to use the latest JavaScript features out of the box. In addition to ES6 features

and

Next.js supports modern browsers with zero configuration. Chrome 64+ Edge 79+ Firefox 67+ Opera 51+ Safari 12+

Regarding above, I expect that .replaceAll should work out of the box for listed browsers.