使用多边形填充和jQuery包的Next.js

c9x0cxw0 于 2022-10-21 发布在 jQuery

关注(0)|答案(1)|浏览(175)

有一个特别涉及Next.js数组的问题-平面填充。我需要兼容旧版本的Chrome，在这种情况下(V60-68)。我正在开发的应用程序使用了一个使用jQuery 3.4构建的视频播放器包。该程序包使用$selector).replaceWith(elem)，并且是发生错误的地方。
$.replaceWith最终运行：

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

问题是，由于Next.js多边形填充，不兼容的浏览器将运行arr.flat.call(array)，并且将在polyfill-module.js中使用未定义的引用失败。当进入node_modules/@next/polyfill-module/src/index.js时，移除数组-平坦的多边形填充，并重建；应用程序将按预期工作，并如jQuery预期的那样运行arr.concant.apply([], array);。  
因此，我正处于如何处理这种情况的十字路口。理想情况下，我希望保持对Next的多填充的一些支持，并且从jQuery迁移是不可能的。有没有办法让两者共存？例如，Next是否提供了一种方法来禁止在特定页面/示例上加载polyfill-module.js文件？或者，是否有任何建议允许jQuery在这种特定情况下按预期运行？

next.js

来源：https://stackoverflow.com/questions/71257925/next-js-working-with-polyfills-and-jquery-package

1条答案

按热度按时间

ql3eal8s1#

我为这个问题提出的解决方案是在旧浏览器上删除array.flat的Next.js默认多边形填充，因为它与jQUery.replaceWith()冲突。
我使用的应用程序使用rooks library和react-device-detect。

import { useDidMount } from 'rooks';
import {
  browserVersion,
  isChrome,
  isSafari,
  isFirefox,
} from 'react-device-detect';

const MyPage: React.FC<PropTypes> = ({ ...props }) => {

  useDidMount(() => {
    /*
      Remove NextJS default polyfill for array.flat as it will 
      error using jQuery.replaceWith() which is used in the package 
      we are using. jQuery will handle support for browsers which 
      do not support array.flat. 
    */

    //  Stats from https://caniuse.com/?search=array.flat
    const minimumChromeArrayFlatVersion = '69';
    const minimumSafariArrayFlatVersion = '12';
    const minimumFirefoxArrayFlatVersion = '62';

    const isChromeCompatible =
      isChrome && browserVersion >= minimumChromeArrayFlatVersion;
    const isSafariCompatible =
      isSafari && browserVersion >= minimumSafariArrayFlatVersion;
    const isFirefoxCompatible =
      isFirefox && browserVersion >= minimumFirefoxArrayFlatVersion;

    const isTargetedBrowser = isChrome || isSafari || isFirefox;
    const isBrowserCompatible =
      isChromeCompatible || isSafariCompatible || isFirefoxCompatible;

    if (isTargetedBrowser && !isBrowserCompatible) {
      Array.prototype.flat = undefined;
    }
  });

  return <div>...</div>;
}

赞(0）回复(0）举报 2022-10-21

我来回答

使用多边形填充和jQuery包的Next.js

1条答案

相关问题

热门标签

最新问答