Bootstrap dropdown require Popper.js (https://popper.js.org) #23381

zspitzer · 2017-08-13T01:53:51Z

I'm having trouble getting started with bootstrap v4 via requirejs due to Popper

Bootstrap dropdown require Popper.js (https://popper.js.org)

https://jsbin.com/xululo/edit?js,console,output

this maybe related? floating-ui/floating-ui#287

zspitzer · 2017-08-13T02:22:46Z

other people are also having problems with this as well, there are 19 posts on Stack Overflow
https://stackoverflow.com/search?tab=Relevance&pagesize=30&q=popper.js%20bootstrap

dushkostanoeski · 2017-08-13T07:32:14Z

Have a look at this https://getbootstrap.com/docs/4.0/getting-started/webpack/

liquidvisual · 2017-08-13T07:55:12Z

Popper.js is proving to be a massive headache for me and I don't even know why. When ever I pull the minified file into my build, it throws a console error - something about not having the .js.map? Seems to work fine though.

But then when I concatenate and uglify my assets - Bootstrap's Javascript just stops working. I know it's something to do with Popper, no idea how to solve it, such a fiddly thing. Arg.

XhmikosR · 2017-08-13T08:05:35Z

/CC @Johann-S

Johann-S · 2017-08-13T08:19:46Z

I'm not an expert on how to use requirejs but the only thing you have to be sure it's to include Popper.js before Bootstrap and to ensure Popper is available in the global scope of your application.

Maybe this page of our documentation can help you : https://getbootstrap.com/docs/4.0/getting-started/webpack/

fran-worley · 2017-08-13T09:24:40Z

For anyone trying (and failing/ struggling) to use Popper js with Ember Js. I got it to work by grab popper from npm, and import the umd version of the dist from node_modules (either using ember-browserify or the latest beta of ember-cli 2.15)

zspitzer · 2017-08-14T00:39:07Z

any ideas @jrburke?

Skipvanthof · 2017-08-14T08:51:52Z

@fran-worley Thanks, that seems to work if you're not using webpack for your project.
Loading popper.js via bower doesn't seem to work. So i don't know why it's included in bower.json.

Miguel-Serejo · 2017-08-14T09:05:50Z

For laravel projects using laravel mix, window.Popper = require('popper.js').default; does the trick.
Same concept should apply for anyone using webpack, as that's what mix uses under the hood.

sjdeere · 2017-08-14T12:25:55Z

i notice that if you npm popper.js the dist/popper.min.js code in that is different from the popper.min.js used in the the bootstrap examples? http://getbootstrap.com/docs/4.0/examples/jumbotron/

do we have to do something to popper.js to export it or something for bootstrap?
If i cheat and use the js from the bootrsap examples my dropdown works.

do we have to use webpack2 or something on popper.js?

Sorry. i've just tested fran-worley solutions and using the one in the dist/umd/popper.min.js folder has worked

StefanRein · 2017-08-14T12:38:44Z

npm install popper.js --save

then somewhere in your application (when using SSR, put it in the main.browser.ts):

require('jquery/dist/jquery');
require('popper.js/dist/umd/popper');
require('bootstrap/dist/js/bootstrap');

and at last in your webpack config:

...
    plugins: [
        ...
        new webpack.ProvidePlugin({
            '$': "jquery",
            'jQuery': "jquery",
            'Popper': 'popper.js'
        }),
...

sjdeere · 2017-08-14T12:55:07Z

Many Thanks. I really need to have a go of webpack . I only ever used concat and uglify for js in my gruntfile.js before for combining js files. From: Stefan Rein [mailto:notifications@github.com] Sent: 14 August 2017 13:41 To: twbs/bootstrap <bootstrap@noreply.github.com> Cc: Stephen Deere <SD@ccsw.co.uk>; Comment <comment@noreply.github.com> Subject: Re: [twbs/bootstrap] Bootstrap dropdown require Popper.js (https://popper.js.org) (#23381) npm install popper.js --save then somewhere in your application (when using SSR, put it in the main.browser.ts): require('jquery/dist/jquery'); require('popper.js/dist/umd/popper'); require('bootstrap/dist/js/bootstrap'); and at least in your webpack config: ... plugins: [ ... new webpack.ProvidePlugin({ '$': "jquery", 'jQuery': "jquery", 'Tether': 'tether', 'Popper': 'popper.js' }), ... — You are receiving this because you commented. Reply to this email directly, view it on GitHub<#23381 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ACrzmftHsDx6YxQtnB5h31zqk6Yl61kEks5sYEB1gaJpZM4O1kVT>.

DDDN · 2017-08-14T21:00:11Z

Same error with Visual Studio 2017 15.3.0 Preview 7.1 and WebCompiler/Bundler&Minifier (both from Mads Kristensen)
The trick is to use the version in the "node_modules\popper.js\dist\umd" folder.

liquidvisual · 2017-08-15T02:18:25Z

I thought I'd elaborate on my earlier issue. Hopefully someone can point me in the right direction.

My current setup is a custom Grunt script with Bower. I pull JQuery, Popper and Bootstrap in and everything works fine when serving. My problem comes when I concatenate and uglify the scripts - all Bootstrap Javascript just stops working without throwing any errors.

Could grunt-uglify be doing something I'm not aware of? Is the Popper code ES6 perhaps, and Uglify can't process that properly?

EDIT: Nevermind, I found the solution to my problem. It seemed pulling in the minified Bootstrap file and then minifying it again was causing the issue (not quite sure why). I just removed "min" and it worked for me.

// From
<script src="/_bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
// to
<script src="/_bower_components/bootstrap/dist/js/bootstrap.js"></script>

edwardm · 2017-08-15T20:51:09Z

I tried the solution suggested by @DDDN and @fran-worley, by using the version inside the "umd", but the issue still persists. Any other suggestions?

Still getting the "Error: Bootstrap dropdown require Popper.js" - and everything is loading in the correct order. I event tried loading directing from CDNs, but the same result.

Just for the sake of getting my project ready for testing, I'll just load the "dropdown" through CSS hover instead.

Nexeuz · 2017-08-15T22:25:01Z

@edwardm you have to import popper before bootstrap on angular would be like this

.angular-cli.json

 "scripts": [
        "../node_modules/jquery/dist/jquery.slim.min.js",
        "../node_modules/tether/dist/js/tether.min.js", 
        "../node_modules/popper.js/dist/umd/popper.js",              
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],

edwardm · 2017-08-15T23:29:18Z

@Nexeuz We're not using Angular.

Co-worker found out we had to roll back to 1.11.0 "umd" for Popper.js and it now works.

Before it was 1.12.1, automatically installed through Bower

Petschko · 2017-08-16T08:57:23Z

It would be helpfull if the popper.js is delivered with the Project. I just downloaded it from the CDN, but would help many other ppl if you provide it through your Download

Johann-S · 2017-08-16T08:58:59Z

They are a link on each plugins which use Popper.js to download it

westonwatson · 2017-08-16T18:07:45Z

Is there a solution for those of us using the CDN links?
I've attempted to include the popper.js CDN link before bringing in Bootstrap's JS... I still get the error/msg tho... Am I missing something?

Thanks in advance.

Johann-S · 2017-08-16T18:22:31Z

Can you try with the last release of Popper.js ? https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.2/umd/popper.min.js

westonwatson · 2017-08-16T18:34:19Z

Thanks @Johann-S, that was it... I appreciate the help! 😸

Johann-S · 2017-08-16T18:46:58Z

That's nothing 😉 do not hesitate to follow the development of Popper.js if you have issues with it

FezVrasta · 2017-08-17T11:40:57Z

@Johann-S (and @zspitzer): I think lot of people will have similar problems until Bootstrap changes its code to define Popper as an explicit dependency instead of relying on its availability in the global scope.

I fixed the OP script, but as you can see, you have to first import the Bootstrap dependencies, then define them as global, and then import Bootstrap:
https://jsbin.com/jujekuquzi/3/edit?js,output

Johann-S · 2017-08-17T12:31:29Z

It will be done here : #22888

surjithctly · 2017-08-22T14:29:57Z

@FezVrasta @Johann-S Why can't this popper.js include in the bootstrap.js file? Why this need to be separate? Since its used by dropdowns, most projects will need that. Also in other cases, we can recompile with the needed plugins same as carousel or modal are separate js file in source.

Why don't we make like this?

~Surjith

Johann-S · 2017-08-22T14:32:52Z

It will be done in the PR linked below

Johann-S · 2017-08-23T08:19:43Z

Now Bootstrap recommand to use Popper.js 1.12.3 see : #23626
So closing this one

leonx075 · 2017-09-04T21:23:58Z

I fixed it by replacing the popper.min.js I was referencing for the one that they use at the Bootstrap website:
popper.min.js

greenroses · 2017-09-06T19:52:27Z

Read the documentation. https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start

`<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

Shefali274 · 2017-09-12T06:42:40Z

Its a simple solution to add popper.js before the bootstrap.min.js file and after that it will working fine. Use this like:

chasepeeler · 2017-09-12T15:12:35Z

Here's how I solved the issue:

http://blog.chasepeeler.com/2017/09/12/bootstrap-4-and-requirejs/

elegisandi · 2017-09-18T01:43:12Z

for laravel, you can use @36864 solution:

For laravel projects using laravel mix, window.Popper = require('popper.js').default; does the trick.
Same concept should apply for anyone using webpack, as that's what mix uses under the hood.

with a little bit of optimization based on PopperJs documentation, you can do:

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

SlimerDude · 2017-09-20T13:27:20Z

Going back to the OPs issue of loading Bootstrap and popper.js via requireJs, until #22888 is released, this is how I've fixed the Bootstrap dropdown require Popper.js (https://popper.js.org) issue...

Similar to what's mentioned in other blog posts the idea is to create your own module that wraps Bootstrap. This module then loads and sets popper.js in the prescribed manner before loading bootstrap:

requirejs.config({
    "paths" : {
        "jquery"        : "https://code.jquery.com/jquery-3.2.1.slim.min",
        "popper"        : "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min",
        "bootstrap"     : "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min"
        "initBootstrap" : "...wotever..."
    },
    "shim" : {
        "bootstrap" : ["jquery"]
    }
});

...
 
define("initBootstrap", ["popper"], function(popper) {
    // set popper as required by Bootstrap
    window.Popper = popper;
    require(["bootstrap"], function(bootstrap) {
        // do nothing - just let Bootstrap initialise itself
    });
});

Now let your code / website have a dependency on initBootstrap and not bootstrap.

Johann-S · 2017-09-20T13:31:41Z

For everyone in our next release we added two new dist files :

bootstrap.bundle.js
bootstrap.bundle.min.js

Which contains Popper.js inside, so you won't have to include Popper.js by yourself

FezVrasta · 2017-09-20T13:44:32Z

@Johann-S what's the progress with the proper CommonJS support of the classic build? Has Rollup landed already?

Johann-S · 2017-09-20T13:54:51Z

Currently I chose to split my PR to handle modularisation if it's what you mean because that's difficult to check if it works in all the environments, but yes now Bootstrap.js use Rollup

chasepeeler · 2017-09-20T13:57:46Z

Similar to what's mentioned in other blog posts...

Thanks for the shoutout @SlimerDude, but, you don't even have to make it that complex. No need to define your own module just for initializing popper. Just use a require, like I show in my blog post

require(["popper"],function(p){
   window.Popper = p;
   require([bootstrap]);
});

The example in my post was based on an implementation where I am defining a module elsewhere, which I load via require, and then attach to global scope for easy console access. However, I still don't create a new module for loading popper and attaching it to the global scope

require(["popper"],function(p){
  window.Popper = p;
  require(["app/main"],function(app){
    window.mainApp = app;
  });
});

Original Blog Post

Chelayos · 2017-09-26T12:45:35Z

404 popper.min.js.map
However my angular site works perfectly. Do i have to include this map file?

FezVrasta · 2017-09-26T13:13:43Z

If you want support for source maps. Yes. Otherwise. No

bhrugs · 2017-09-28T01:55:28Z

comment this line
//export default Popper;

add this line
window.Popper = Popper;

in your Popper.js [last line]

eckenroed · 2017-09-29T19:05:41Z

This worked for me.

window.$ = window.jQuery = require('jquery')
window.Popper = require('popper.js')
require('bootstrap')

ghost · 2017-10-02T18:43:31Z

None of above worked for me, I got error TypeError: Popper is not a constructor.

This fixed the issue:

assets.js

window.$ = window.jQuery = require('jquery-slim');
window.Popper = require('popper.js');

require('bootstrap/dist/js/bootstrap');

webpack.config.js

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

danaidesign · 2017-10-09T05:39:26Z

I use popper.js in umd folder. It's solve. (dist/umd/popper.min.js)

xdvarpunen · 2017-10-13T23:57:06Z

Here is quick start example project with Webpack 3 + Bootstrap 4: https://github.com/xdvarpunen/webpackboot

jusfeel · 2017-10-24T10:37:53Z

I change bootstrap@4.0.0.beta-2 back to bootstrap@4.0.0.alpha-6.

Johann-S · 2017-10-24T10:41:47Z

Since Bootstrap 4 beta 2 you can use bootstrap.bundle.js | bootstrap.bundle.min.js which contains Popper.js inside 👍 so no need to include or download Popper.js

anantakrroy · 2017-10-26T05:53:07Z

The Bootstrap website itself mentions the following- "If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.". And it is followed by the relevant links to the jQuery and Popper.js. Here is the link https://getbootstrap.com/docs/4.0/getting-started/download/#bootstrap-cdn

vannitotaro · 2017-10-30T10:21:21Z

Since Bootstrap 4 beta 2 you can use bootstrap.bundle.js | bootstrap.bundle.min.js which contains Popper.js inside 👍 so no need to include or download Popper.js

@Johann-S I think that docs should explain the difference between the bundle and not-bundle js files.

Johann-S · 2017-10-30T10:25:32Z

Yep do not hesitate @vannitotaro to make a PR 😉

Johann-S added js v4 labels Aug 13, 2017

Carlosxell mentioned this issue Aug 14, 2017

syntaxError with bootstrap4 and gulp floating-ui/floating-ui#386

Closed

FezVrasta mentioned this issue Aug 18, 2017

Better modularization of our plugins #22888

Closed

Johann-S closed this as completed Aug 23, 2017

twbs locked and limited conversation to collaborators Oct 30, 2017

Bootstrap dropdown require Popper.js (https://popper.js.org) #23381

Bootstrap dropdown require Popper.js (https://popper.js.org) #23381

Comments

zspitzer commented Aug 13, 2017

zspitzer commented Aug 13, 2017 • edited Loading

dushkostanoeski commented Aug 13, 2017

liquidvisual commented Aug 13, 2017

XhmikosR commented Aug 13, 2017

Johann-S commented Aug 13, 2017 • edited Loading

fran-worley commented Aug 13, 2017

zspitzer commented Aug 14, 2017

Skipvanthof commented Aug 14, 2017 • edited Loading

Miguel-Serejo commented Aug 14, 2017

sjdeere commented Aug 14, 2017

StefanRein commented Aug 14, 2017 • edited Loading

sjdeere commented Aug 14, 2017 via email

DDDN commented Aug 14, 2017

liquidvisual commented Aug 15, 2017 • edited Loading

edwardm commented Aug 15, 2017 • edited Loading

Nexeuz commented Aug 15, 2017

edwardm commented Aug 15, 2017

Petschko commented Aug 16, 2017

Johann-S commented Aug 16, 2017

westonwatson commented Aug 16, 2017

Johann-S commented Aug 16, 2017

westonwatson commented Aug 16, 2017

Johann-S commented Aug 16, 2017

FezVrasta commented Aug 17, 2017

Johann-S commented Aug 17, 2017

surjithctly commented Aug 22, 2017

Johann-S commented Aug 22, 2017

Johann-S commented Aug 23, 2017

leonx075 commented Sep 4, 2017

greenroses commented Sep 6, 2017 • edited Loading

Shefali274 commented Sep 12, 2017

chasepeeler commented Sep 12, 2017

elegisandi commented Sep 18, 2017 • edited Loading

SlimerDude commented Sep 20, 2017

Johann-S commented Sep 20, 2017

FezVrasta commented Sep 20, 2017

Johann-S commented Sep 20, 2017

chasepeeler commented Sep 20, 2017 • edited Loading

Chelayos commented Sep 26, 2017 • edited Loading

FezVrasta commented Sep 26, 2017

bhrugs commented Sep 28, 2017

eckenroed commented Sep 29, 2017

ghost commented Oct 2, 2017

danaidesign commented Oct 9, 2017

xdvarpunen commented Oct 13, 2017

jusfeel commented Oct 24, 2017

Johann-S commented Oct 24, 2017

anantakrroy commented Oct 26, 2017 • edited Loading

vannitotaro commented Oct 30, 2017

Johann-S commented Oct 30, 2017

zspitzer commented Aug 13, 2017 •

edited

Loading

Johann-S commented Aug 13, 2017 •

edited

Loading

Skipvanthof commented Aug 14, 2017 •

edited

Loading

StefanRein commented Aug 14, 2017 •

edited

Loading

liquidvisual commented Aug 15, 2017 •

edited

Loading

edwardm commented Aug 15, 2017 •

edited

Loading

greenroses commented Sep 6, 2017 •

edited

Loading

elegisandi commented Sep 18, 2017 •

edited

Loading

chasepeeler commented Sep 20, 2017 •

edited

Loading

Chelayos commented Sep 26, 2017 •

edited

Loading

anantakrroy commented Oct 26, 2017 •

edited

Loading