Having trouble using Popper.js with Bootstrap 4 Beta in Webpack 3.x? You might encounter the error message "Popper is

Question

Having trouble using Popper.js with Bootstrap 4 Beta in Webpack 3.x? You might encounter the error message "Popper is

Exciting news - Bootstrap 4 Beta has been released! However, Tether has been replaced with Popper.js for tooltip functionality (among other features). This change has triggered a new error in the console, prompting me to switch to Popper.js:

Bootstrap dropdown require Popper.js

Updating my webpack.config.js (you can view the full config here) seemed to resolve the issue (simply replacing Tether with Popper):

plugins: [
new ProvidePlugin({
  'Promise': 'bluebird',
  '$': 'jquery',
  'jQuery': 'jquery',
  'window.jQuery': 'jquery',
  'window.$': 'jquery',
  Popper: 'popper.js' 
}),

I also added import 'bootstrap' to my main.ts file.

However, a new problem has arisen (not present with Tether) - a console error now states:

Uncaught TypeError: Popper is not a constructor

Upon debugging in Chrome, I noticed that Popper is loaded as an Object (resolving the Bootstrap complaint) as shown in the screenshot below. https://i.sstatic.net/pyLZi.jpg

In conclusion, I utilize Bootstrap tooltip within a basic custom element constructed with Aurelia and TypeScript (previously functional with 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');
  }
}

It seems that my Popper import may have been incorrect. My question is, what is the recommended method to properly import Popper using Webpack 3.x?

javascript twitter-bootstrap webpack aurelia bootstrap-4

Answer 1

Answer №1

During my exploration of the Bootstrap 4 documentation, I stumbled upon a helpful section regarding Webpack. This section provides clear instructions on how to correctly install it. By following the steps outlined in the Bootstrap - installing with Webpack guide, the solution is as simple as making modifications to the webpack.config.js file:

plugins: [
  // ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
  // ...
]

Additionally, don't forget to import it in the main.ts file:

import 'bootstrap';

Following these steps, we can quickly get back to business with Bootstrap 4 in no time! :)

Answer 2

During my exploration of the Bootstrap 4 documentation, I stumbled upon a helpful section regarding Webpack. This section provides clear instructions on how to correctly install it. By following the steps outlined in the Bootstrap - installing with Webpack guide, the solution is as simple as making modifications to the webpack.config.js file:

plugins: [
  // ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
  // ...
]

Additionally, don't forget to import it in the main.ts file:

import 'bootstrap';

Following these steps, we can quickly get back to business with Bootstrap 4 in no time! :)

Answer 3

Answer №2

For those utilizing Webpack, follow these steps:

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // Make sure to include "default"
require('bootstrap/dist/js/bootstrap');

Answer 4

For those utilizing Webpack, follow these steps:

window.$ = window.jQuery = require('jquery');
window.Popper = require('popper.js').default; // Make sure to include "default"
require('bootstrap/dist/js/bootstrap');

Answer 5

Answer №3

When using bootstrap": "^4.1.1", there is no need to specifically import jquery and popper.js. These plugins are already included when you import 'bootstrap' or its individual plugins.

Note: If you decide to import plugins individually, you must also install exports-loader.

You do not have to require files with

require('exports-loader?file ... ')

as detailed here, because this is automatically handled by simply installing

$ npm install exports-loader --save-dev

.

import 'bootstrap'; // Import all plugins at once

//
// Or, import plugins individually
//
// import 'bootstrap/js/src/alert';
// import 'bootstrap/js/src/button';
// import 'bootstrap/js/src/carousel';
// import 'bootstrap/js/src/collapse';
// import 'bootstrap/js/src/dropdown';
// import 'bootstrap/js/src/modal';
// import 'bootstrap/js/src/popover';
// import 'bootstrap/js/src/scrollspy';
// import 'bootstrap/js/src/tab';
// import 'bootstrap/js/src/tooltip';
// import 'bootstrap/js/src/util';

There is no need for configuration like the following:

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

As a vue.js developer, in the new vue-cli-3, we create vue.config.js in the root and include code like the one mentioned above to register a new plugin. However, in bootstrap": "^4.1.1", all this is unnecessary.

Bootstrap's tooltip plugin is dependent on popper.js and needs to be activated manually. You can achieve this by following the example below in the component where you are using the tooltip element:

<script>
  import $ from 'jquery';

  export default {
    mounted() {
      $('[data-toggle="tooltip"]').tooltip();
    },
  };
</script>

Answer 6

When using bootstrap": "^4.1.1", there is no need to specifically import jquery and popper.js. These plugins are already included when you import 'bootstrap' or its individual plugins.

Note: If you decide to import plugins individually, you must also install exports-loader.

You do not have to require files with

require('exports-loader?file ... ')

as detailed here, because this is automatically handled by simply installing

$ npm install exports-loader --save-dev

.

import 'bootstrap'; // Import all plugins at once

//
// Or, import plugins individually
//
// import 'bootstrap/js/src/alert';
// import 'bootstrap/js/src/button';
// import 'bootstrap/js/src/carousel';
// import 'bootstrap/js/src/collapse';
// import 'bootstrap/js/src/dropdown';
// import 'bootstrap/js/src/modal';
// import 'bootstrap/js/src/popover';
// import 'bootstrap/js/src/scrollspy';
// import 'bootstrap/js/src/tab';
// import 'bootstrap/js/src/tooltip';
// import 'bootstrap/js/src/util';

There is no need for configuration like the following:

const webpack = require('webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
        Popper: ['popper.js', 'default']
      })
    ]
  }
}

As a vue.js developer, in the new vue-cli-3, we create vue.config.js in the root and include code like the one mentioned above to register a new plugin. However, in bootstrap": "^4.1.1", all this is unnecessary.

Bootstrap's tooltip plugin is dependent on popper.js and needs to be activated manually. You can achieve this by following the example below in the component where you are using the tooltip element:

<script>
  import $ from 'jquery';

  export default {
    mounted() {
      $('[data-toggle="tooltip"]').tooltip();
    },
  };
</script>

Answer 7

Answer №4

Encountered the same issue recently and found the solution detailed in this link: https://github.com/FezVrasta/popper.js/issues/287

After making changes, my main.ts now resembles something like this:

import "jquery";
import Popper from "popper.js";

(<any>window).Popper = Popper;

require("bootstrap");

To ensure the require call works, I had to execute

npm install @types/requirejs --save

.

Update: A more efficient solution can be found in the documentation https://getbootstrap.com/docs/4.0/getting-started/webpack/

plugins: [
  ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
    // If plugins were imported individually, they must be required here:
    Util: "exports-loader?Util!bootstrap/js/dist/util",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    ...
  })
  ...
]

Answer 8

Encountered the same issue recently and found the solution detailed in this link: https://github.com/FezVrasta/popper.js/issues/287

After making changes, my main.ts now resembles something like this:

import "jquery";
import Popper from "popper.js";

(<any>window).Popper = Popper;

require("bootstrap");

To ensure the require call works, I had to execute

npm install @types/requirejs --save

.

Update: A more efficient solution can be found in the documentation https://getbootstrap.com/docs/4.0/getting-started/webpack/

plugins: [
  ...
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default'],
    // If plugins were imported individually, they must be required here:
    Util: "exports-loader?Util!bootstrap/js/dist/util",
    Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
    ...
  })
  ...
]

Answer 9

Answer №5

To incorporate essential scripts into an ASP.net Core 2 project, simply include the following lines of code in the main HTML file ("_Layout.cshtml"):

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

This approach has proven successful for me.

Answer 10

To incorporate essential scripts into an ASP.net Core 2 project, simply include the following lines of code in the main HTML file ("_Layout.cshtml"):

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/js/popper.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>

This approach has proven successful for me.

Having trouble using Popper.js with Bootstrap 4 Beta in Webpack 3.x? You might encounter the error message "Popper is

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Unable to choose radio button again

What's the secret behind generating a crisp 400 on paper?

Show different options like selection menus, checkboxes, date pickers, and more based on the content of a JSON

What is the best way to capture a screenshot using selenium in conjunction with synchronous JavaScript?

Can one extract request data from an rxjs-timeout-error?

Content not appearing in ng repeat loop

What is the best way to create a repetitive pattern using a for loop in Javascript?

Trouble with displaying canvas images in imageDraw() function

JavaScript can dynamically attach EventListeners to elements, allowing for versatile and customized event

Configure environment files for different environments in React using webpack: .env, .env.test, and .env.production

Manipulate the value of the <input> element when focused through JavaScript

Confirm the session validity before invoking the web service function from an ajax function triggered by clicking a button

Tips for adjusting the position of an icon when encountering a line break using Javascript or CSS

Enhance your JavaScript skills by deserializing objects and seamlessly integrating new methods

Eliminating the glow effect, border, and both vertical and horizontal scrollbars from a textarea

Error: The system encountered an issue while trying to access an undefined property 'find'

Are there any methods to implement object-oriented programming in JavaScript?

Is there a way to prevent a link from activating when I click on one of its internal elements?

Prevent the bootstrap collapse hide feature from functioning when content is already visible or expanded

The Facebook share button on my website is malfunctioning