I'm getting the following error while trying to import bootstrap
library into my Layout. Interesting is that this error doesn't happen when running the develop
version. It only happens when I try to build
a production version.
yarn add bootstrap jquery popper.js
to add the dependenciesimport 'bootstrap'
into src/layouts/index.js
yarn build
By doing the above steps, it's expected to have a production-ready version of this website including bootstrap JS libraries.
success delete html and css files from previous builds โ 0.042 s
success open and validate gatsby-config โ 0.178 s
success copy gatsby files โ 0.015 s
success onPreBootstrap โ 0.026 s
success source and transform nodes โ 0.033 s
success building schema โ 0.120 s
success createLayouts โ 0.012 s
success createPages โ 0.000 s
success createPagesStatefully โ 0.010 s
success onPreExtractQueries โ 0.000 s
success update schema โ 0.084 s
success extract queries from components โ 0.036 s
success run graphql queries โ 0.024 s
success write out page data โ 0.004 s
success write out redirect data โ 0.001 s
success onPostBootstrap โ 0.001 s
info bootstrap finished - 1.594 s
success Building CSS โ 3.833 s
success Building production JavaScript bundles โ 6.515 s
error Building static HTML for pages failed
See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
120 |
121 | function setTransitionEndSupport() {
> 122 | $$$1.fn.emulateTransitionEnd = transitionEndEmulator;
| ^
123 | $$$1.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
124 | }
125 | /**
WebpackError: Cannot set property 'emulateTransitionEnd' of undefined
- bootstrap.js:122 setTransitionEndSupport
~/bootstrap/dist/js/bootstrap.js:122:1
- bootstrap.js:200
~/bootstrap/dist/js/bootstrap.js:200:1
- bootstrap.js:202
~/bootstrap/dist/js/bootstrap.js:202:4
- bootstrap.js:7
~/bootstrap/dist/js/bootstrap.js:7:1
- bootstrap.js:10 Object.<anonymous>
~/bootstrap/dist/js/bootstrap.js:10:2
- index.js:6 Object.<anonymous>
src/layouts/index.js:6:1
- index.js:3 Object.exports.__esModule
.cache/layouts/index.js:3:3
error Command failed with exit code 1.
We recommend using react-bootstrap with Gatsby not bootstrap directly. There docs are built with Gatsby actually :-)
I managed to fix it using reactstrap
. It was a better solution indeed.
Hi @tregismoreira , how did you do ?
I tried the same, it works perfectly when running gatsby develop
but reactstrap components with animations (toggle, dropdowns, modals...) do not work anymore when running gatsby build
.
Here is the related Stackoverflow question I wrote : https://stackoverflow.com/questions/51699306/gatsby-js-with-reactstrap-navbartoggler-dropdowntoggle-modal-not-working-w
Thank you
Using 3rd party libraries to resolve a simple thing brings another level of unnecessary complexity.
Any ideas how to make this work without 3rd party libs?
I came here looking for a solution to the same problem. I actually had the same error in react-static (Another SSG that I'm trialling) and I found that it only occurred when I included bootstrap in the root .js files (App or index). For some reason once I got bootstrap out of there then it was fine. Why I don't know, I'm pretty new to web development, but maybe there is something in Gatsby at that React app level that's causing problems.
Having to pull in yet another library is not really going to work for us. We want raw bootstrap.
If I can't solve it in Gatsby then I'll have to forget it as an option.
@KyleAMathews I appreciated the idea, however I do note that react-bootstrap still has the following in place in their docs:
React-Bootstrap currently targets Bootstrap v3.
Mind you their github speaks differently.
In any case it would be good to get an understanding as to why Gatsby has the conflict. Has any early investigations been undertaken?
error Building static HTML for pages failed
See our docs page on debugging HTML builds for help https://goo.gl/yL9lND
120 |
121 | function setTransitionEndSupport() {
> 122 | $$$1.fn.emulateTransitionEnd = transitionEndEmulator;
| ^
123 | $$$1.event.special[Util.TRANSITION_END] = getSpecialTransitionEndEvent();
124 | }
125 | /**
WebpackError: TypeError: Cannot set property 'emulateTransitionEnd' of undefined
- bootstrap.js:122 setTransitionEndSupport
[lib]/[bootstrap]/dist/js/bootstrap.js:122:1
- bootstrap.js:199
[lib]/[bootstrap]/dist/js/bootstrap.js:199:1
- bootstrap.js:201
[lib]/[bootstrap]/dist/js/bootstrap.js:201:4
- bootstrap.js:7
[lib]/[bootstrap]/dist/js/bootstrap.js:7:63
- bootstrap.js:10 Object../node_modules/bootstrap/dist/js/bootstrap.js
[lib]/[bootstrap]/dist/js/bootstrap.js:10:2
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- sync-requires.js:6 Object../.cache/sync-requires.js
lib/.cache/sync-requires.js:6:62
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- static-entry.js:9 Module../.cache/static-entry.js
lib/.cache/static-entry.js:9:22
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:83
lib/webpack/bootstrap:83:1
The same problem occurs for me with gatsby v1.9.277. Everything works fine in development build. The website was converted to gatsby from handlebars, and it uses all of the old styles and HTML, remaking everything in reactstrap is not a valid option for us
I found something that could be helpful for our problem click
Could anyone familiar with Gatsby suggest how to reconfigure this for our needs? I Assume Gatsby uses its own loaders etc
If this is about sass-loader
-> includePaths
config option - you can pass configuration to gatsby-plugin-sass
- see https://www.gatsbyjs.org/packages/gatsby-plugin-sass/#how-to-use
Well to be honest I don't know what it is about, I am not a web dev ;) what I know is that I can't build the website because of the same error that @jufemaiz has is occuring. I just don't know what is what and don't know when and where the things are used, and how the build process actually looks like, so I can't figure out the correct configuration on my own. I just want to build the prod version of the website. Dev works fine
@jufemaiz I kinda fixed it (the prod build works), the way I did it is I created bootstrap.scss
file and inside I put
@import "~bootstrap/scss/bootstrap";
and then in index.js
instead of import 'bootstrap'
directly I imported import '../assets/styles/bootstrap.scss'
And now, why I said "kinda fixed", well, because now bootstrap dropdowns are broken, they don't react to clicks, so my solution for this will be just relying on component state and adding show
class manually to dropdown element when needed. If you have better idea, please share it ๐
@ljaniszewski someone has created a starter using boostrap and has it running, see here if it helps any issues you're experiencing.
I've tested it for another issue and had no issues with boostrap, also issuing a production build.
@jonniebigodes the starter does not include bootstrap in the traditional webpack supported fashion but rather creates script elements in the DOM.
E.g. https://github.com/jaxx2104/gatsby-starter-bootstrap/issues/4
@jufemaiz while reading the link you posted, i understand why he took the approach, because if memory serves me right, jquery which is a dependency of boostrap, it works on the client side spectrum and gatsby on the other side, the server side. Also after doing some detective work it seems that the bootstrap js tries to access some client only objects, for instance the window
object. And with that instead of having going the extra mile and having issues with dependencies throwing errors, he took the cdn approach, just wait for the build to be processed and avoid touching anything that could damage and/or that could not be processed during gatsby's build process. And then when the user loads the page the js part of bootstrap is fetched from the cdn server and added and all should be working without any issues.
For the css/scss side of things as the gatsby-plugin-sass
plugin can take care of things like @pieh mentioned. But for the actual js included with boostrap it would a safer bet to go the route that the starter uses, have it injected afterwards.
Thanks for the update @jonniebigodes. Had kind of hoped that the ability to roll the dependencies into a single JS pack was part of the capabilities. Still curious as to what it is that's conflicting between the Bootstrap dependencies added via bootstrap
and gatsby
.
i manually fixed this problem import bootstrap.min.js and other bootstrap's dependency with CDN in html.js
file.
I also curious that what makes conflicting in build time.
@gnujoow can you please share your solution here ?
I've to use bootstrap-select
, bootstrap
, jquery
, popper
, isotope
, wow
and a script file that uses all these libs with Gatsby. I did like this in layout.js:
import React from "react"
import { StaticQuery, graphql } from 'gatsby'
import "bootstrap/dist/css/bootstrap.min.css"
import "./vendors/themify-icon/themify-icons.css"
import "font-awesome/css/font-awesome.min.css"
import "./vendors/flaticon/flaticon.css"
import "animate.css/animate.min.css"
import "./vendors/magnify-pop/magnific-popup.css"
import "./layout.css"
import "./responsive.css"
import "jquery/dist/jquery.min.js"
import "popper.js/dist/popper"
import "bootstrap/dist/js/bootstrap.min.js"
import "bootstrap-select/dist/js/bootstrap-select.min.js"
import "wowjs/dist/wow.min.js"
import "jquery.scroll-parallax/dist/js/jquery.scrollParallax.js"
import "./vendors/isotope/isotope-min.js"
import "./vendors/magnify-pop/jquery.magnific-popup.min.js"
import Loader from "./loader"
import Header from "./header"
import Breadcrumb from "./breadcrumb"
During gatsby develop I am not sure it works or not but I am not getting any errors. During gatsby build it failed. So, I copied all these files to static and build passed.
Then I checked for all these files in common.js but not a single file code is there. How do I use all these dependencies with Gatsby ?
I temporarily fixed this issue in mine by removing all import's of the bootstrap js files from my /components/layout.js
file.
Before:
import 'bootstrap/dist/css/bootstrap.min.css'
import 'jquery/dist/jquery.min.js'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
After:
import 'bootstrap/dist/css/bootstrap.min.css'
I'm not sure yet what the proper way is to import these files yet.
@JesseBilsten
I am doing like this in gatsby-node.js
. The if condition stage === "build-html"
is important while building. I tried to put all the packages with regex in require.resolve
but it didn't work.
const webpack = require('webpack');
exports.onCreateWebpackConfig = ({
stage,
rules,
loaders,
plugins,
actions,
}) => {
if (stage === "build-html") {
actions.setWebpackConfig({
module: {
rules: [
{
test: require.resolve('bootstrap'),
use: loaders.null(),
},
{
test: require.resolve('wowjs/dist/wow.js'),
use: loaders.null(),
},
{
test: require.resolve('jquery'),
use: loaders.null(),
},
],
},
})
}
actions.setWebpackConfig({
module: {
rules: [
{
test: require.resolve('wowjs/dist/wow.js'),
loader: 'exports-loader?this.WOW'
},
],
},
plugins: [
new webpack.ProvidePlugin({
'$': "jquery",
'jQuery': "jquery",
'window.jQuery': 'jquery',
'Popper': 'popper.js',
"Bootstrap": "bootstrap.js"
}),
],
})
}
This works for me for gatsby build
.
This works for me with Bootstrap 4 and bootstrap-table:
const webpack = require('webpack');
exports.onCreateWebpackConfig = ({ actions, stage, loaders }) => {
const config = {
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery',
}),
],
};
if (stage === 'build-html') {
config.module = {
rules: [
{
test: require.resolve('bootstrap'),
use: loaders.null(),
},
{
test: require.resolve('bootstrap-table'),
use: loaders.null(),
},
{
test: require.resolve('bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile'),
use: loaders.null(),
},
{
test: require.resolve('bootstrap-table/dist/extensions/sticky-header/bootstrap-table-sticky-header'),
use: loaders.null(),
},
{
test: require.resolve('bootstrap-table/dist/extensions/cookie/bootstrap-table-cookie'),
use: loaders.null(),
},
{
test: require.resolve('jquery'),
use: loaders.null(),
},
],
};
}
actions.setWebpackConfig(config);
};
I also got the same issue and fixed it by this way.
Most helpful comment
Using 3rd party libraries to resolve a simple thing brings another level of unnecessary complexity.
Any ideas how to make this work without 3rd party libs?