'Next.js working with polyfills and jQuery package

Having an issue that specifically involves the Next.js array-flat polyfill. I need compatibility with older versions of Chrome, in this instance (v60-68). The application I'm working on uses a video player package that was built using jQuery 3.4. The package uses $selector).replaceWith(elem) and is where the error occurs.

$.replaceWith eventually runs:

  var flat = arr.flat ? function(array) {
    return arr.flat.call(array);
  } : function(array) {
    return arr.concat.apply([], array);
  }

The problem is an incompatible browser will run arr.flat.call(array) because of the Next.js polyfill and will fail inside the polyfill-module.js with an undefined reference. When going into the node_modules/@next/polyfill-module/src/index.js, removing the array-flat polyfill, and rebuilding; the app will work as expected and run arr.concant.apply([], array); as jQuery expects.



So I’m at a cross roads on how to handle the situation. Ideally want to maintain some support with Next's polyfills and migrating from jQuery is a non-starter. Is there a way each can coexist? For example, does Next provide a way to disable the polyfill-module.js file from loading on particular pages/instances? Or is there any suggestions to allow jQuery to run as expected in this particular situation?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source