I tried following which gives me error during build:
Steps
- 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";
- 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