How to load Popper.js for use by Bootstrap 4?

I have a Laravel 5.5 project that uses Bootstrap 4. This is all working expect for things that need Popper.js

For example, the tooltop here just shows the HTML, it doesn't render it.

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-html="true" title="<em>Tooltip</em> <u>with</u> <b>HTML</b>">
            Tooltip with HTML
        </button>

So, my problem seems to be that I haven't loaded popper.js (although I am not seeing any error message to saying that in the console) but I don't know how I should do that. According to the Bootstrap 4 documentation it needs to be loaded before bootstrap. Where would I load it if I wanted to do this the Laravel way (and I assume use Laravel Mix?)

My Webpack.mix.js file looks like this...

let mix = require('laravel-mix');

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery'],
    'popper.js/dist/umd/popper.js': ['Popper']
});



mix.js('node_modules/popper.js/dist/popper.js', 'public/js').sourceMaps();
mix.js('resources/assets/js/app.js', 'public/js').sourceMaps();

mix.sass('resources/assets/sass/app.scss', 'public/css')
.sass('resources/assets/sass/com.scss', 'public/css');

mix.styles([
    'resources/assets/css/com-landing-page.css',
    'resources/assets/css/com-badge-animation.css'
], 'public/css/com.css');


mix.copy('resources/assets/js/thirdparty/gauge.min.js', 'public/js/gauge.min.js');

mix.js('resources/assets/js/com.js', 'public/js').version();

mix.copyDirectory('resources/assets/images', 'public/img/');

I think I must have added the popper.js line after trying to resolve this issue previously.

The top of my Bootstrap.js file looks like this...


window._ = require('lodash');


import Popper from 'popper.js/dist/umd/popper.js';


try {
    window.Popper = Popper;    
    window.$ = window.jQuery = require('jquery');    
    require('bootstrap');
  } catch (e) {}

Again, I added the Popper bits to try to resolve this problem but I don't really understand the JS parts of Laravel so although it doesn't cause an error message it doesn't solve the problem either.

Grateful for any guidance on this.

Thanks. David.

GeordieJackson

5 years ago

Level 18

Have you run npm run dev after making the changes?

DLUK44

5 years ago

Level 3

Yes. I just ran it again too. There are no errors reported and popper.js appears

 DONE  Compiled successfully in 11398ms                                                                         14:59:55

                                               Asset       Size  Chunks                    Chunk Names
                                          \js\app.js    4.08 MB       0  [emitted]  [big]  \js\app
                                       \js\popper.js     230 kB       1  [emitted]         \js\popper

I can see popper.js in public/js too, so I guess I could put

<script src="{{ asset('js/popper.js') }}"></script>

in app.blade.php but where do I put it? It has to come before Bootstrap and as that is being added automagically, I don't think using a script tag in app.blade.php is early enough as it doesn't resolve the issue and isn't the 'correct' Laravel way of doing things either.

Thanks. David.

Please or to participate in this conversation.