Gatsby

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) 到 avoid/reduce 高性能操作（就像 jQuery 那样）直接指向 DOM。此外，您正在加载 React 范围之外的第三方依赖项，因为您使用的是 Bootstrap and not React-Bootstrap.

Also, one of the interesting behaviours is that it sometimes works, sometimes doesn't. It can happen when refreshing the page multiple times. It would work for couple of refreshes, then it would break and stay like that for couple of refreshes etc.

你的方法总是会导致这个 behavior/issue，React 总是会受到第三方依赖项的影响，并且会根据是否加载它们而表现得很奇怪。此外，加载 jQuery，正如我所说，指向并操纵 DOM，而 React 操纵 vDOM 可能会破坏 React's hydration，可能会破坏您的应用程序，因为确实如此。

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

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

import Button from 'react-bootstrap/Button';

Gatsby - Bootstrap Error: util.js:68 Uncaught TypeError: Cannot read property 'fn' of undefined

Gatsby - Bootstrap Error: util.js:68 Uncaught TypeError: Cannot read property 'fn' of undefined

jquery

reactjs

bootstrap-4

react-helmet