Webpack-encore: Unable to use Bootstrap 4.0 Dropdown

[WebWikom]

Hi guys,

I've been trying to use Boostrap 4.0 beta in my current symfony project.
I've created a shared entry like that :
.createSharedEntry('vendor', [ 'jquery', 'popper.js', 'bootstrap', 'bootstrap/scss/bootstrap.scss' ])
But the same message on the js console : Bootstrap dropdown require Popper.js

I searched for this issue on popper and bootstrap repo, and i tried a few things from here but none of them worked

If i do understand well, popper need to be included before bootstrap, however when i check the vendor.js file, it seems that popper is at the end of the file.

Any idea why it doesn't work ?

Thanks.

[Lyrkan]

Hi @WebWikom,

The order of the different parts in your vendor.js file doesn't really matter. Each one of them isn't actually executed when the file is loaded but only when required. Moreover, Bootstrap seems to look for Popper in a global variable, which means that even if you imported it before loading Bootstrap it would probably still fail.

Here is a page with some info that may help you achieve what you want to do: http://getbootstrap.com/docs/4.0/getting-started/webpack/

The main points are:

• you need to import bootstrap somewhere in your JS code (you probably already did that)
• if you want to use something that needs Popper you have to provide it globally using the ProvidePlugin. In Encore you can do that using the Encore.autoProvideVariables() method

[WebWikom]

That's perfect ! It now works like a charm !
What i did was adding this to the webpack config
.autoProvideVariables({ Popper: ['popper.js', 'default'] })

I stumbled upon the bootstrap webpack documentation at some point but i was unable to find the ProvidePlugin equivalent method in Encore.

Thanks @Lyrkan for the really clear explanation and the fast response !