title: Adding Bootstrap to Gatsby produces "Uncaught TypeError: Cannot read property 'fn' of undefined"
body: <p>I'm using Gatsby 2.13.50 (CLI: 2.7.14). I'm trying to add Bootstrap 4 to my base template at /src/components/layout.js. It's used by /src/pages/index.js. Basically the directory structure as taught by most beginner tutorials.</p>
  
  <p>I keep getting this error:</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'fn' of undefined
      at bootstrap.js:6
      at bootstrap.js:6
      at bootstrap.js:6
  </code></pre>
  
  <p>Several solutions online say that it's because bootstrap.js is loading before jquery.js and popper.js. They say placing jquery.js and popper.js first and bootstrap.js last would solve it. My results vary depending on how I bring them into the file.</p>
  
  <p>First, the code in layout.js:</p>
  
  <pre><code>import React from "react"
  import Header from '../components/header'
  import '../styles/bootstrap-4.3.1-dist/css/bootstrap.css'
  import { withPrefix } from "gatsby"
  
  // If I import them like this, Gatsby cannot find the files.
  // import '../styles/site_js/jquery.js'
  // import '../styles/site_js/popper.js'
  // import '../styles/site_js/bootstrap.js'
  
  import { Helmet } from "react-helmet"
  
  const Layout = (props) =&gt; {
      return (
          &lt;div&gt;
  
              &lt;Header /&gt;
              &lt;main role="main" className="container"&gt;
                  {props.children}
              &lt;/main&gt;
  
              // If I do this, the error happens all the time.
              {/* &lt;Helmet&gt;
                      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
                      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
                      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
                  &lt;/Helmet&gt; */}
  
              // If I do this, the error happens once every handful of times.
              &lt;Helmet&gt;
                  &lt;script src={withPrefix('site_js/jquery.js')} type="text/javascript" /&gt;
                  &lt;script src={withPrefix('site_js/popper.js')} type="text/javascript" /&gt;
                  &lt;script src={withPrefix('site_js/bootstrap.js')} type="text/javascript" /&gt;
              &lt;/Helmet&gt;
          &lt;/div&gt;
      )
  }
  
  export default Layout
  </code></pre>
  
  <p>I found three ways to bring the JavaScript files into layout.js.</p>
  
  <p>The first one imports the files like this:</p>
  
  <pre><code>import '../styles/site_js/jquery.js'
  import '../styles/site_js/popper.js'
  import '../styles/site_js/bootstrap.js'
  </code></pre>
  
  <p>With the above, Gatsby fails to compile. It gives this error for all three files:</p>
  
  <pre><code>Module not found: Error: Can't resolve 'popper.js' in '/home/testjs/hayatdemo/src/styles/site_js'
  </code></pre>
  
  <p>I double-checked and the files exist at that file path. So, I don't know what's wrong.</p>
  
  <p>The second loads the three files from external sources:</p>
  
  <pre><code>&lt;Helmet&gt;
      &lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
      &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/Helmet&gt;
  </code></pre>
  
  <p>With this, Gatsby compiles, but the error appears every time I reload the page.</p>
  
  <p>Finally, this <a href="https://stackoverflow.com/questions/54834930/how-to-include-local-javascript-on-a-gatsby-page">solution</a> says to add the files to /static in the root directory and call them with the help of <code>withPrefix()</code>. Like so:</p>
  
  <pre><code>&lt;Helmet&gt;
      &lt;script src={withPrefix('site_js/jquery.js')} type="text/javascript" /&gt;
      &lt;script src={withPrefix('site_js/popper.js')} type="text/javascript" /&gt;
      &lt;script src={withPrefix('site_js/bootstrap.js')} type="text/javascript" /&gt;
  &lt;/Helmet&gt;
  </code></pre>
  
  <p>This works for the most part but the error returns once every handful of reloads.</p>
  
  <p>How do I solve this problem? </p>