Custom polyfills

[Nick-Mazuk]

In the NextJS docs on polyfills, it says to add custom polyfills via _app.tsx. Is there an example for this?

Specifically, I'm looking for a way to load custom polyfills only for browsers that need them. For instance, a ResizeObserver or IntersectionObserver polyfill.

P.S. The example in the examples folder says that that's not the recommended way of loading polyfills. It just references the docs for custom polyfills.

[leerob]

Good catch — this isn't very clear right now. You should add a top-level import for the specific polyfill you need in your Custom <App> or the individual component. Example:

import 'resize-observer-polyfill'

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

export default MyApp

I will update the example 👍

[paul-vd]

Thanks @wereHamster for that solution.

I was busing doing a demo for clients and to my surprise when I wanted to show them the new feature I could not understand why my app was returning that a function is not defined on a prototype that I just presently created a custom polyfill for. going back to my reverted code I see that when I applied my import sorter via vs code, it set the polyfill after the required code.

Whilst I agree with you @leerob about the simplicity of importing in the _app, currently there is not "ignore" comments you can add to your file to avoid vscode from organizing your imports, which can always lead to human error of forgetting that the polyfill should be first.

microsoft/TypeScript#41494

So in a production environment it is much safer to do the former solution and just customize the webpack.

[tettoffensive]

@leerob This doesn't seem to work with 'css-paint-polyfill'. It complains that window is not defined. Perhaps there's a way to do this client-side only?

[wereHamster]

@tettoffensive In the webpack config you can add code to the entry points conditional on isServer, eg.

  webpack: (config, options) => {
    const originalEntry = config.entry
    config.entry = async () => {
      const entries = await originalEntry()

      if (entries['main.js']) {
        // Load polyfills only in the client.
        if (!options.isServer && !entries['main.js'].includes('./src/polyfills.ts')) {
          entries['main.js'].unshift('./src/polyfills.ts')
        }
      }

      return entries
    }

    return config
  }

[charkour]

Is there a way to only include a polyfill if the browser does not support the feature? We are trying to shave bytes on our bundle size. Also, Google Lighthouse audits suggest we only ship modern JS to the client and our team is guessing the old JS shipped is due to the polyfill. Thanks.

[disjukr]

Also note that if you import polyfills in _app, and have have a code editor plugin which automatically sorts imports, you may end up in a situation that the polyfill is loaded too late, after code that needs it. Therefore I'm not a fan of this solution.

I disagree. A single line import is much easier than overriding the webpack config. You can just add a lint ignore to that line?

@leerob Some mobile browsers that our customers using are throwing errors due to the absence of globalThis, which Next.js runtime relies on. To polyfill this, we need to ensure that our polyfill runs before Next.js scripts.

Resolving this issue is not possible with import statements, and even when trying to place <Script> or <script> at the top of layout.js, Next.js runtime always loads first, making it impossible to address this problem properly.

Is there any recommended way to solve this?

[andresgutgon]

Hi, I'm having this issue but with Next 13.x and using the app directory. What's the recommended way of using pollyfills with new app folder?

Thanks!

[AjaxTheOne]

Thanks, it solved my issue with "reflect-metadata"!

[TracerLee]

@MartinXPN I found that I cannot import core-js related polyfills using this approach, which would result in an error message like "Module parse failed: Cannot use 'import.meta' outside a module".
Example:
polyfills.ts

'use client';
import 'core-js/modules/es.array.every'

[plrthink]

I also found this doesn't work since the code is not being bundled in client scripts.

[carlos-dubon]

@leerob where should we import 'reflect-metadata'; for reflect polyfill to work?

[secure12]

@MartinXPN "use client"; is the magic! Thank you!

[RaenonX]

RaenonX-PokemonSleep/pokemon-sleep-ci@d4ce3c1

Using next v14. Tried to add custom polyfill like what was shown in this thread in the commit above, but it doesn't seem like it's getting polyfilled. How do I check if it's really getting polyfilled?

Edit: Solved. Need these changes and all good. RaenonX-PokemonSleep/pokemon-sleep-ci@b9fb523

[OptimisticQuan]

Thank you, this solved a problem that had been bothering me for half a day.

[ArnabChatterjee20k]

Any docs for importing custom webpack polyfills in next js 14?? I am trying to solve the issue for node:buffer error

[ArnabChatterjee20k]

Any code example or repo example?

[RaenonX]

Sorry had to screenshot because my repo is private now...lol

[ArnabChatterjee20k]

No isssue. I will figure it out from the image
Thanks

[ArnabChatterjee20k]

Basically you have imported the polyfills in the root or the top level layout

[fireMan-34]

I tested it and found that exporting with the Head component only works in page routing mode.

this is pages/_document.tsx

this is app/_layout.tsx

this is build output
this is page router output

this is app router output