Gatsby - 引导错误：util.js:68 未捕获的类型错误：无法读取未定义的属性“fn”

Question

我目前正在使用 Gatsby 框架在 React 中构建一个网站。以下问题是这样的：

util.js:68 Uncaught TypeError: Cannot read property 'fn' of undefined
    at util.js:68
    at util.js:10
    at bootstrap.min.js:6
    at bootstrap.min.js:6

此错误是在该特定部分（在 Bootstrap 选项卡上）引发的：

按下时它们不起作用。

它们确实可以在一个已经上线的网站上工作（与我现在正在制作的网站相同，但使用 HTML/JS 构建）

我尝试过的修复/“解决方法”：

• 在其他脚本之前加载 jQuery。这是我加载脚本的顺序（以及样式表，以防万一）。它们是使用 React Helmet 加载的。我还在 HTML 版本中使用相同的加载脚本顺序：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
  crossOrigin="anonymous"
/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" />

<script
  src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
  integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
  crossOrigin="anonymous"
/>

<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
  integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
  crossOrigin="anonymous"
/>

• 使用不同版本的 jQuery 和 Bootstrap 但还是不行。

另外，有趣的行为之一是它有时有效，有时无效。多次刷新页面时可能会发生这种情况。它可以在几次刷新后工作，然后它会崩溃并保持这样的状态进行几次刷新等等。

Answer 1

我强烈建议改变这种方法。您正在使用 React 创建虚拟 DOM (vDOM)，以避免/减少直接指向 DOM 的高性能操作（如 jQuery 那样）。此外，您正在加载 React 范围之外的第三方依赖项，因为您使用的是 Bootstrap 而不是 React-Bootstrap。

此外，有趣的行为之一是它有时有效， 有时不。多次刷新页面时可能会出现这种情况 次。它可以工作几次刷新，然后它就会崩溃并且 保持这样的状态进行几次刷新等。

你的方法总是会导致这种行为/问题，React 总是会受到第三方依赖项的影响，并且根据它们是否加载而表现得很奇怪。此外，加载 jQuery，正如我所说，指向并操作 DOM，而 React 操作 vDOM 可能会破坏 React 的水合作用，从而可能会破坏你的应用程序，就像它所做的那样。

也就是说，解决方案是避免使用 jQuery（我个人总是推荐它）。用 jQuery 编码并指向 DOM 的所有内容都可以用普通 JavaScript 或使用 React 友好的方法进行转换。

在 Bootstrap 方面，我建议使用 npm/yarn 来处理依赖关系并使用基于 React 的方法，就像我说的，使用 React-Bootstrap。例如：

import Button from 'react-bootstrap/Button';

Answer 2

错误是由 bootstrap.js 尝试访问 jQuery fn 属性时引起的

$.fn

。

最好的解决方案是确保脚本按顺序加载。
以下对我有用：

  useEffect(() => {
    let scripts = [
      "/assets/js/jquery-3.1.1.min.js",
      "/assets/js/popper.min.js",
      "/assets/js/bootstrap.min.js",
      "/assets/js/plugins/metisMenu/jquery.metisMenu.js",
      "/assets/js/plugins/slimscroll/jquery.slimscroll.min.js",
      "/assets/js/inspinia.js",
      "/assets/js/plugins/pace/pace.min.js",
    ];

    let current = 0;
    let max = scripts.length-1;

    let load_next_script = () => {
      const script = document.createElement('script');
      script.setAttribute('src', scripts[current]);
      script.setAttribute('defer', '');

      current++;
      if (current <= max){
        script.onload = load_next_script;
      }

      document.body.appendChild(script);
      scripts.push(script);
    };

    load_next_script();
  });

我在将 html-css-js-bootstrap 模板转换为 ReactJS 时使用了它。