jqueryreactjsbootstrap-4gatsbyreact-helmet

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

I am currently building a site in React using Gatsby framework. The following issue is this:

Bootstrap error

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

This error is thrown on this certain part (on Bootstrap tabs):

Bootstrap tabs

They don't work when pressed.

They do work however on a already live site (the same one I am making right now, but built with HTML/JS)

Fixes/"workarounds" I tried:

<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"
/>

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.

Solution

  • I would strongly recommend changing the approach. You are using React to create a virtual DOM (vDOM) to avoid/reduce high-performance actions (like jQuery does) pointing directly to the DOM. In addition, you are loading third-party dependencies outside the scope of React, since you are using 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.

    Your approach will always cause this behavior/issue, React will always be affected on third-party dependencies and will behave oddly depending on if they are loaded or not. In addition, loading jQuery, which as I said, points and manipulates the DOM, while React manipulates the vDOM may break the React's hydration, potentially breaking your application, as it does.

    Said that, the solutions are to avoid using jQuery (which personally I will always recommend). Everything that is coded in jQuery pointing the DOM, can be transpiled in vanilla JavaScript or using a React-friendly approach.

    On the Bootstrap side, I would recommend using npm/yarn to handle the dependency and using a React'-based approach, like I said, using React-Bootstrap. For example:

    import Button from 'react-bootstrap/Button';