How to add Bootstrap to gatsby-ghost-starter

I tried following which gives me error during build:

Steps

  1. add following lines to components/common/index.js after adding dependencies using npm i bootstrap jquery popper.js :
import "bootstrap/dist/css/bootstrap.min.css";
import $ from "jquery";
import Popper from "popper.js";
import "bootstrap/dist/js/bootstrap.bundle.min";
  1. try running gatsby build

I get jQuery is undefined error

More details;

Technical details:

  • Ghost Version: 3.2.0
  • Gatsby CLI version: 2.8.26
  • Gatsby version: 2.13.45
  • Node Version: 12.10.0
  • OS: windows

Found an answer to this:

Best way to add Bootstrap and related dependency with gatsby is adding them in gatsby-browser.js like following:

Step 1: Run npm i bootstrap jquery popper.js

Step 2: In gatsby-browser.js add following imports

import "bootstrap/dist/css/bootstrap.min.css";
import "jquery/dist/jquery.min.js";
import "popper.js/dist/popper.min";
import "bootstrap/dist/js/bootstrap.min.js";

Note: if gatsby-browser.js is already present and contains ES5 code, then that needs to converted to ES6 first