Bootstrap: Uncaught ReferenceError: Popper is not defined

[pcobao35]

When I try to add Bootstrap 4.0.0-beta.2 to a simple page, it shows me at the Browser's console that Popper is not defined... I already do what is asked to do in #24635, but the the problem persists... Only when I downgrade to Bootstrap 3.3.7 the console's message desapear... How can I fix this - and keep using Bootstrap 4? Thanks.

[Johann-S]

Without an example we cannot help you, our documentation work with our beta 2

EDIT: Plus in our latest release (beta 2) you can use bootstrap.bundle.min.js which already contain Popper.js

[NightstarDev]

Same here

1. In Visual Studio 2017 I Created a New ASP.NET Core 2 Web App using the Angular Template
2. Removed "bootstrap": "3.3.7" from package.json
3. Removed bootstrap folder from node_modules
4. Ran npm install popper.js
5. Ran npm install [email protected]
6. Added the webpack.ProvidePlugin({}) to webpack.config.js with jquery and Popper settings per documentation.
7. Build and Ran Project in Chrome.

... Uncaught ReferenceError: Popper is not defined

package.json file has:
"bootstrap": "^4.0.0-beta.2",
"jquery": "^3.2.1",
"popper.js": "^1.12.6",

No other changes were made.

[Johann-S]

Be sure to use the UMD version of Popper.js

[dushkostanoeski]

Did you add the popper.js script to the webpack.config.vendor.js script? If you don't see it, VS probably grouped the webpack files and you have to expand them.

Also this is a much better Core + Angular starter template, and they updated it to Angular 5.

[NightstarDev]

Without success I did try adding the same ProvidePlugin object in webpack.config.vendor.js but I have to tell you that I knew nothing about Webpack one week ago, and all I wan't to do is replace Bootstrap 3 with 4,
The new Core + Angular 5 starter template does not have Bootstrap 4 either.
I just need a simple hello world app with Bootstrap 4 configured in webpack.config.js without any Angular or anything else at this point.

[Johann-S]

I'm sure you'll find that helpful : http://getbootstrap.com/docs/4.0/getting-started/webpack/

[icebits]

Hi, I do see the error appear on browsers when using with bootstrap.bundle.js, use F12 to open developer tool, it will show

Uncaught ReferenceError: Popper is not defined (error on Chrome)

IE 11 developer tool show exception on util.js, 'Popper' is undefined
If I replace bootstrap.bundle.js with UMD Popper.js, no error.

Sample: https://jsbin.com/kupixuhape/edit?html,output

[Johann-S]

It's because you included both bootstrap.min.js and bootstrap.bundle.min.js you should just include bootstrap.bundle.min.js which contains Bootstrap and Popper.js

[ghost]

Hi @Johann-S ,
i was using the bundle ok, but when i tried to use popper like a new Popper() it was not defined.
reverting to the UMD worked.

(im tring to have the jquery-ui datepicker to use popper, not sure if will success but i thought it worth to feedback)

Regards,

[Johann-S]

I'll close this issue because it's not a real bug on Bootstrap it's an HOW-TO or folks ask for help.
So if you need any help please ask around in the official Slack team or Stack Overflow. See our readme for more details.

[AlejandroFlorin]

This should not be closed, at least with respect to the documentation. I having the same problem following the bootstrap documentation for installing it with webpack and I get the same error. How do you ensure that popper loads first using webpack?

[Johann-S]

It's not an issue but an How to use webpack with Bootstrap
This is a working template of how to use webpack with Bootstrap : https://github.com/twbs/bootstrap/files/1440583/testWebpack.zip

[AlejandroFlorin]

Thanks for the template. Two things though:

The documentation http://getbootstrap.com/docs/4.0/getting-started/webpack/ needs to be updated from:

import 'bootstrap'

to

import $ from 'jquery'
import Popper from 'popper.js'
import 'bootstrap'

Second, i get the following error in the "import $ from 'jquery' line:

Could not find a declaration file for module 'jquery'

[Johann-S]

I don't have this error using the template 🤔 be sure you did npm i jquery popper.js
And do not hesitate to open a PR to improve our documentation 👍

[engrshahabuddin]

I am getting same issue.
Please check my link-
http://devstheme.net/

give solution.

[AlejandroFlorin]

I got past the error:

Could not find a declaration file for module 'jquery' error

by using this line:
import * as $ from "jquery";

instead of:
import $ from 'jquery'

[AlejandroFlorin]

I should note that the basic template you provided does work as is with the import $ from 'jquery' line. However, I had to use import * as $ from "jquery" for my project, I have no idea why.

[AlejandroFlorin]

Here is what I finally had to do to get it to work in my environment. In the main entry point ts file as defined in webpack:

import * as $ from 'jquery';
import 'bootstrap/dist/js/bootstrap.bundle.js'; // This bundle includes popper 

Also had to install @types/jquery

[branko-d]

Hi @NightstarDev, have you tried deleting the wwwroot/dist to force webpack to re-bundle everything from scratch?

I'm also new to webpack and bootstrap and am trying to use them from Visual Studio ASP.NET Core project. After making changes to package.json and webpack.config.vendor.js (as described in the discussion above), i was still seeing "Popper is not defined" in the web browser console, until I deleted the dist folder and re-built the project, at which point webpack reported in the Visual Studio console that it is doing a "first time" bundling. Looks like webpack doesn't behave like a normal build system and include its own "project file" in the dependency graph...

[joshspivey]

For my setup it was a race condition.
//webpack.common.js

`

    plugins: [

    new CleanPlugin(['assets/dist'], {

        verbose: true,

        watch: true,

    }),

    new LodashPlugin, // Complements babel-plugin-lodash by shrinking its cherry-picked builds further.

    new webpack.ProvidePlugin({

        $: 'jquery',

        jQuery: 'jquery',

        'window.jQuery': 'jquery',

        Popper: path.resolve(__dirname, 'assets/js/theme/libs/popper.min.js'),

    }),

],

`

then in your module import like this.

`

    import Popper from './theme/libs/popper.min';

    import './theme/libs/bootstrap.min';

`