Bootstrap: Pack Popper.js to the main JS file

[SamThilmany]

I'm using the ES6 import syntax to import bootstrap and popper.js but I always get the error message, that Bootstrap needs popper.js as a dependency. This happens because popper.js is loaded after bootstrap.

Changing the input oder in the js file does not help.

How can I set popper.js as a dependency for bootstrap?

PS: I'm using browserify to handle the packaging.

[Johann-S]

Popper should be available in the global scope of your application or in the window object

[davidbailey00]

With Browserify / ES6 modules, you need to require / import Popper from within the Bootstrap JS. If you import it from your app script, it'll only be accessible to that script.

[SamThilmany]

@techdavid Thanks for this idea, but unfortunately it doesn't seem to work.

I get the following error

Error: Bootstrap's JavaScript requires jQuery. jQuery must be included before Bootstrap's JavaScript.

If I include jQuery in the HTML in an extra script tag, the error changes to:

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

The file I'm compiling with gulp and gulp-browserify only contains your proposed code, with the slight difference, that popper needs to be called popper.js as it's node_modules folder is called popper.js.

Maybe my gulp task is not correct?!

const uglify       = require( 'gulp-uglify' );
const babelify     = require( 'babelify' );
const browserify   = require( 'browserify' );
const source       = require( 'vinyl-source-stream' );
const buffer       = require( 'vinyl-buffer' );
const stripDebug   = require( 'gulp-strip-debug' );

const jsSRC        = './src/js/';
const jsFront      = 'main.js';
// const jsBack      = 'backend-main.js';
const jsFiles      = [ jsFront ];
const jsURL        = './assets/js/';

gulp.task( 'js', function() {
    jsFiles.map( function( entry ) {
        return browserify({
            entries: [jsSRC + entry]
        })
        .transform( babelify, { presets: [ 'es2015' ] } )
        .bundle()
        .pipe( source( entry ) )
        .pipe( rename( {
            extname: '.min.js'
        } ) )
        .pipe( buffer() )
        .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
        .pipe( sourcemaps.init({ loadMaps: true }) )
        .pipe( gulpif( options.has( 'production' ), uglify() ) )
        .pipe( sourcemaps.write( '.' ) )
        .pipe( gulp.dest( jsURL ) )
        .pipe( browserSync.stream() );
    });
});

Please note, that I'm separating the JavaScript filef of the front-end (const jsFront) and those of the back-end (const jsBack), where the backend currently is empty and thus not included in the jsFiles array. So the map function currently only maps over one file. And that file (for testing reasons) only contains your three lines of code.

In my package.json I have the following:

"babel": {
    "presets": [
        "es2015"
    ]
}

[davidbailey00]

I haven't tested the code I suggested, so I'm not sure if it would work or not for sure. But maybe Bootstrap can't access the global window when imported with Browserify... to be honest I can't really help you because I don't know enough about Babel and Browserify, sorry. But FYI: this issue has been assigned to a core member, so they are definitely going to fix it, and the next version is also going to remove the jQuery dependency, so all the JS will be in one file.

[SamThilmany]

@techdavid Okay, that's nice to know. Thank you for your help anyway.

[Johann-S]

Closed thanks to this PR (https://github.com/twbs/bootstrap/pull/23735) which include Popper.js inside Bootstrap, so in our next release use bootstrap.bundle.js or bootstrap.bundle.min.js

[shayneoAtNorwood]

That seems like a perfect solution to me @Johann-S

[RemyLeBleau]

I am installing popper using npm install popper.[email protected] --save but I can't find the file to include it in my html?

[Awpatterson217]

I notice in the official docs for Bootstrap v4, Popper.js is listed as a dependency. Is Popper.js currently shipped with Bootstrap v4, or do I need to find a way to include it? Thanks for any assistance/recommendations!

[wolfy1339]

Popper.js is both packaged with Bootstrap in an optional bundle AND is a dependency for the non-bundled version