Node.js 14 deprecation, replaceAll polyfill and other polyfills

[nbouvrette]

I thought I would share this here since it might be useful to others. This weekend I started updating my open source repos to get rid of the Node.js 14 support which one of the new benefits of using Node.js >= 16 was to finally start to use replaceAll.

During my naive changes, I thought that this would be no problem for my Next.js app since this would get automatically polyfilled but apparently replaceAll is one of the many polyfills not covered by Next.js. So I had 3 options:

• Not use replaceAll
• Include the polyfill in _app
• Find another solution

So I ended up building the following solution which required top-level-await support. I'm not sure if this is doable using SWC, but on Webpack you need to do the following change in your Webpack config:

  config.experiments = { ...config.experiments, topLevelAwait: true }

Then you need to install core-js: npm --save-dev i core-js

Then in your _app you can add the following conditional-polyfill:

if (typeof window !== 'undefined' && !String.prototype.replaceAll) {
  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
  // @ts-ignore
  await import('core-js/actual/string/replace-all')
}

Basically, this polyfill will only be loaded if your browser does not include replaceAll - before I started using Next.js this is how I was adding all my polyfills and it would only load the ones required. I wonder if this could be something Next.js would consider at some point instead of having users manage them individually. It could even go further and only add these conditional polyfills if replaceAll is used in the code just like how Babel does it.