next.js(vercel)でString.prototype.replaceAllをpolyfillする

最近stringに生えたreplaceAllはだいぶ便利だ。今までreplace(/foo/g, "baz")のようにしていたものをreplaceAll("foo", "baz")などできる。

ただこれはnode.jsではv15からのみ入っていて、v14以下では利用出来ない。

現状vercelはnode v14系なので、利用するとランタイムエラーが起きる

そこで使うのを諦めるかpolyfillするかの選択肢になる。

調べると下記のようなissueが見つかった

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

要は_app.jsに記載するのがお作法らしい。^[1]

例えばcore-jsをpolyfillとして利用するならこんな具合になる

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

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

export default MyApp

脚注

1. Custom Pollyfillの項目にはサラッと書いてあるようだった