Uncaught TypeError: Popper is not a constructor

I’m seeing the following error message when using Popper 1.9.8:

Uncaught TypeError: Popper is not a constructor

I’m trying to import Popper as a module using Webpack (Laravel Mix) and tried several combinations:

import Popper from 'popper.js';
require('popper.js/dist/popper.js' );
require('popper.js/dist/esm/popper.js' );
require('popper.js/dist/umd/popper.js' );
window.Popper = require('popper.js/dist/esm/popper.js' );

How can I import Popper, it doesn’t matter if I use import * from or require().

Issue Analytics

State:
Created 6 years ago
Comments:33 (13 by maintainers)

Top GitHub Comments

13reactions

tegolacommented, Jul 30, 2017

I got into an event stranger situation:

My main file (stripped down):

import Popper from 'popper.js/dist/umd/popper.js';
window.Popper = Popper;

import 'bootstrap/js/src/util';
import 'bootstrap/js/src/dropdown';

This leads to an error: Uncaught Error: Bootstrap dropdown require Popper.js.

Adding the umd bundle as an alias in Mix’s autoload makes it work:

mix.autoload({
   jquery: ['jQuery'],
   'popper.js/dist/umd/popper.js': ['Popper']
});

Now, I’m actually happy that it works, but I don’t fully understand why it wont if I do not add it to webpack aliases (via mix.autoload). I’m not asking you to answer my question, I’m just leaving this here for the records.

7reactions

tegolacommented, Jul 29, 2017

I have the same issue as @tillkruss, and I’m using Laravel Mix as well.

I have tried every combination of import or require, set window.Popper to Popper or Popper.default, and so on. I also added autoloading options to Laravel Mix config file:

mix.autoload({
   jquery: ['jQuery'], // Bootstrap
   'popper.js': ['Popper'] // Bootstrap
});

However, the only way I got this working was by manually editing Bootstrap’s dropdown.js to use new Popper.default(...) instead of just new Popper(...).

Anybody knows its ways around this? What am I doing wrong?