Gatsby - 引导错误：util.js:68 Uncaught TypeError：无法读取未定义的属性“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/bootstrap@4.6.0/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's hydration，可能会破坏您的应用程序，就像它一样。

也就是说，解决方案是避免使用 jQuery（我个人会一直推荐）。所有用 jQuery 编码的指向 DOM 的东西，都可以用原生 JavaScript 或使用 React 友好的方法进行转译。

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

import Button from 'react-bootstrap/Button';