Question

50

Bootstrap 4 Beta importing Popper.js with Webpack 3.x throws Popper is not a constructor

rated 0 times [ 53] [ 3] / answers: 1 / hits: 23236 / 7 Years ago, sat, august 12, 2017, 12:00:00

So Bootstrap 4 Beta is out... yey! However Tether has been replaced by Popper.js for tooltip (and other features). I saw an error thrown in the console fast enough to advise me of the change to Popper.js:

Bootstrap dropdown require Popper.js

Seems easy enough, I went and updated my webpack.config.js (the entire config can be seen here) and Bootstrap then started working (the only change I did was to replace Tether with Popper):

plugins: [

new ProvidePlugin({

  'Promise': 'bluebird',

  '$': 'jquery',

  'jQuery': 'jquery',

  'window.jQuery': 'jquery',

  'window.$': 'jquery',

  Popper: 'popper.js' 

}),

I also did the import 'bootstrap' in my main.ts file.

However I now have another problem (which I did not have with Tether), a new error is thrown in the console:

Uncaught TypeError: Popper is not a constructor

If I try to debug in Chrome, I do have Popper loaded as an Object (which is why Bootstrap stopped complaining) as you can see in the print screen below.

Finally to include all my code. I use Bootstrap tooltip with a simple custom element built with Aurelia and TypeScript (which used to work with previous Bootstrap alpha 6 and Tether)

import {inject, customAttribute} from 'aurelia-framework';

import * as $ from 'jquery';



@customAttribute('bootstrap-tooltip')

@inject(Element)

export class BootstrapTooltip {

  element: HTMLElement;



  constructor(element: HTMLElement) {

    this.element = element;

  }



  bind() {

    $(this.element).tooltip();

  }



  unbind() {

    $(this.element).tooltip('dispose');

  }

}

Looks like I did not import Popper correctly, if so then what is the best way to achieve that with Webpack 3.x?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

neildrews

Add To Favorites

Follow

Total Points: 166

Total Questions: 103

Total Answers: 85

Location: Moldova

Member since Sat, Aug 6, 2022

2 Years ago

neildrews questions

1 scrollIntoView() doesn't scroll anywhere

Fri, Feb 18, 22, 00:00, 2 Years ago

1 MUI - makeStyles - Cannot read properties of undefined

Tue, Oct 12, 21, 00:00, 3 Years ago

1 How to select an option of a slim select with jquery

Tue, Mar 23, 21, 00:00, 3 Years ago

1 Angular: How to refresh a part of html ( form / div / table )

Wed, Aug 19, 20, 00:00, 4 Years ago

1 How to access plugin from nuxt.js store?

Sun, Aug 16, 20, 00:00, 4 Years ago

View All

answered 7 Years ago kourtney · Accepted Answer

While browsing Bootstrap 4 documentation. I actually found a section about Webpack which explains how to install it correctly. Following the Bootstrap - installing with Webpack documentation, the answer is to simply modify the webpack.config.js with the following:

plugins: [

  // ...

  new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

    'window.jQuery': 'jquery',

    Popper: ['popper.js', 'default']

  })

  // ...

]

and let's not forget to import it in the main.ts

import 'bootstrap';

and voilà! We are back in business :)