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

[vtenfys]

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.

[shayneoAtNorwood]

Personally I think the popper.js dependency is a big mistake. Its tripped a few folks I know now and up until today I couldnt quite figure it out.
The problem is for us north of the wall freefolk who just use <script> includes and dont go beyond jquery the whole ES6 things a total headscratcher. I have no idea how to set up a gulp or whatever pipeline with ES6 babble and all the other guff. Hell, even SASS confuses me a bit. I'm your average user!

If it cant be integrated in, perhaps at least some documentation in the getting started section on how to include the UMD version (I think? Thats how I managed to blunder into getting it to work) of popper.js to make stuff work again, because as it stands, its pretty damn confusing.

[SamThilmany]

@Johann-S How do I achieve that?

@TechDavid So I need to import popper.js within .node_modules/bootstrap. This does not sound like a clean solution to me. Isn't the main idea of using node_modules, to not changing the files and simply integrating them into your own project, so that every other developer starts from the same point? If I change theses files, I'd have to tell every other developer in my project to change this too... This cannot be the best-practise.

@shayneoAtNorwood I totally agree. I'd really like Bootstrap to simply include popper.js themselves. If they use it as a dependency, they should also deliver it in a package. One nice and clean bootstrap.js file containing the bootstrap code and the code of popper.js would make the life of many, if not every, developer so much easier.

[vtenfys]

@SamThilmany of course, this is not good practice within the context of node modules. With Johann's suggestion, you could do something like the following:

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

And then Bootstrap would be able to access the jQuery and Popper variables.

[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"
	]
}

[vtenfys]

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 (#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.js@1.11.0 --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