Gridsome: Importing Bootstrap 4

[nolfranklin]

Description

When importing Bootstrap 4 (node_modules) into main.js, 404 error is thrown.

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'

Expected result

jQuery + Bootrstrap working as intended.

Actual result

Bootstrap JS works on "gridsome develop" but fails on "gridsome build"

Failed to render /404
TypeError: Cannot set property 'emulateTransitionEnd' of undefined
    at setTransitionEndSupport (node_modules/bootstrap/dist/js/bootstrap.js:121:0)
    at assets/js/app.787bb5f8.js:3196:3
    at module.exports.module.exports (node_modules/bootstrap/dist/js/bootstrap.js:7:62)
    at Object.<anonymous> (node_modules/bootstrap/dist/js/bootstrap.js:10:1)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.<anonymous> (assets/js/app.787bb5f8.js:22984:17)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Module.<anonymous> (node_modules/gridsome/app/main.js:4:9)
    at __webpack_require__ (webpack/bootstrap:25:0)
    at Object.<anonymous> (assets/js/app.787bb5f8.js:2348:18)

[lokecarlsson]

Not sure what the issue is but I might have some tips you can look into.

https://github.com/LokeCarlsson/gridsome-starter-bootstrap

This is my gridsome starter project with bootstrap + bootstrap vue included. Might be helpsome in some way, other than that all I can think of is if you have tried bootstrap-loader?

[nolfranklin]

Thanks, @LokeCarlsson! I was able to get Bootstrap-Vue setup without any issues but was curious if there was a way to load Bootstrap 4 /dist/js into webpack via the main.js file? Haven't taken a go at the boootstrap-loader option yet though - giving that a try now. :)

My current workaround is using head.script.push to bring in jQuery/Bootstrap js via main.js.

[lokecarlsson]

Adding it to head via main.js should work yeah 👍