SOLVED: Laravel-mix Issue: Popper.js dependency cannot be found by Boostrap 4 beta

From the error, it seems you are trying to require "popper" instead of "popper.js". If this doesn't fix it, please post your bootstrap.js file.

SOLUTION

Edited my webpack.mix.js to this:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */
mix.scripts([
    'resources/assets/js/jquery.js',
    'resources/assets/js/popper.js',
    'resources/assets/js/bootstrap.js',
    'resources/assets/js/app.js',
    ],'public/js/app.js').version();
mix.sass('resources/assets/sass/app.scss', 'public/css').version();

Result: DONE Compiled successfully in 2993ms

(Is it wrong when I feel good about solving my own problems?) :-D

Better Solution

You need to use the umd version of popper.js.

webpack.mix.js:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.autoload({
        jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"],
        'popper.js/dist/umd/popper.js': ['Popper']
    })
   .js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

resources/assets/js/bootstrap.js:

window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 * Include the Popper.js library, since Boostrap 4 requires it
 */
try {
  window.$ = window.jQuery = require('jquery');

  import Popper from 'popper.js/dist/umd/popper.js';
  window.Popper = Popper;
  
  require('bootstrap');
} catch (e) {}

/**
 * Vue is a modern JavaScript library for building interactive web interfaces
 * using reactive data binding and reusable components. Vue's API is clean
 * and simple, leaving you to focus on building your next great project.
 */

window.Vue = require('vue');

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-Requested-With': 'XMLHttpRequest'
};

confirmed that this will make Bootstrap 4 work with laravel 5.4.

In my case, I had to move the import outside of the try to compile w/o errors.

edit: ps nice work

It's best to have all of your vendor libraries in one file, and your app.js in a separate file. Reason being is your vendor libraries won't change as often as your app.js will, and no need to make the browser download everything again if only your app.js changed and none of the vendor libraries.

Or you can require it as usual like this

try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default; // default is very important.
    require('bootstrap');
} catch (e) {}

https://stackoverflow.com/a/45950766/7396433

Having just been around the houses trying to integrate bootstrap-4 with auth I found this post which made things much easier: https://laravel-news.com/bootstrap-4-laravel-preset.

After creating a new project I just needed to run:

1. composer require laravelnews/laravel-twbs4

2. php artisan preset bootstrap4-auth

3. npm install

4. npm run dev

Hope this helps someone :-)

Tried many of the solutions above but didnt work. So I just copied popper.js.map (the file that was missing) to public/js. I know, not elegant, but at least my console is quiet now

well, i know that topic is very old but the issue is that the files with this line at the end:

//# sourceMappingURL=popper.js.map

will give you the headache and that error in Chrome/Firefox related to that file. What is doing actually is trying to load the map file from that location which when you compile the JS files all together there is being created just one map file (app.js.map or whatever is being called)

You can direct import like

import bootstrapBundle from './../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js';

no need to install popper