Not able to add Bootstrap in production

[far11ven]

Issue Summary

Trying to add Bootrap 4.x into the starter template like below, which works fine in development env but gives consequent error:

Error:

To Reproduce

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

2. try running gatsby build

Any other info e.g. Why do you consider this to be a bug? What did you expect to happen instead?

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

[daviddarnes]

This isn’t a bug but a development query, you’re better off asking in our community forum where others also using this starter can help https://forum.ghost.org/ 🙂

[far11ven]

Found a 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 be converted to ES6 first