Polyfilling String.prototype.replaceAll in Next.js (Vercel)

The recently added replaceAll to strings is quite convenient. You can now use replaceAll("foo", "baz") instead of what used to be replace(/foo/g, "baz").

However, this was only introduced in Node.js from v15 onwards and is not available in v14 or lower.

Currently, Vercel uses Node.js v14 series, so using it will cause a runtime error.

You are then faced with the choice of either giving up on using it or polyfilling it.

Looking into it, the following issue was found:

• https://github.com/vercel/next.js/discussions/15715

In short, it seems that including it in _app.js is the standard practice.^[1]

For example, if you are using core-js as a polyfill, it would look like this:

// _app.js
import 'core-js/features/string/replace-all' // Added

function MyApp({ Component, pageProps }) {
  return <div>
        <Component {...pageProps} />
  </div>
}

export default MyApp

脚注

1. It seems to be mentioned briefly in the Custom Polyfills section.