Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing Bootstrap 4

See original GitHub issue

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)

Issue Analytics

State:
Created 4 years ago
Comments:8

Top GitHub Comments

3reactions

loke-devcommented, May 25, 2019

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

3reactions

loke-devcommented, May 24, 2019

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?

Top Results From Across the Web

Introduction - Bootstrap

Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

Bootstrap 4 Get Started - W3Schools

If you want to download and host Bootstrap 4 yourself, go to https://getbootstrap.com/, and follow the instructions there. Create First Web Page With...

How to add Bootstrap to HTML (Step by Step Guide)

Another way of importing Bootstrap to HTML is to directly download the files locally to your HTML project folder. The files can be...

bootstrap - npm

Start using bootstrap in your project by running `npm i bootstrap`. There are 11499 other projects in the npm registry using bootstrap.

Adding Bootstrap to Next.js - DEV Community ‍ ‍

Once bootstrap is installed we have to import the Bootstrap CSS in _app.js . We import the CSS in App component because App...