gatsby: WebpackError: Cannot set property 'emulateTransitionEnd' of undefined

We recommend using react-bootstrap with Gatsby not bootstrap directly. There docs are built with Gatsby actually 😃

https://react-bootstrap.github.io

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?

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);
};

@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

I also got the same issue and fixed it by this way.

https://stackoverflow.com/questions/56493502/how-to-add-bootstrap-js-in-a-gatsby-website/56494756#56494756

@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.

@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

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.