Having trouble loading popper.js using Laravel mix and webpack

I have been working on my project with Bootstrap 4 beta and Laravel 5.4, using npm and Laravel mix to load my JavaScript dependencies. Everything was going smoothly until I encountered an error while trying to use Bootstrap JavaScript methods. The error message I received was "Bootstrap dropdown require Popper.js". I tried downloading and loading Popper.js in both my bootstrap.js and webpack.mix.js files, but the error persisted. Can anyone help me identify what I might have done wrong?

bootstrap.js

try {
  window.$ = window.jQuery = require('jquery');

  require('popper.js');
  require('datatables.net');
  require('datatables.net-autofill');
  require('datatables.net-buttons');
  require('bootstrap');
} catch (e) {
  console.log(e);
}

webpack.mix.js

const { mix } = require('laravel-mix');

mix.js([
  'resources/assets/js/app.js',
  'node_modules/jquery/dist/jquery.min.js',
  'node_modules/popper.js/dist/umd/popper.js',
  'node_modules/bootstrap/dist/js/bootstrap.js',
  'node_modules/datatables.net/js/jquery.dataTables.js',
  'node_modules/datatables.net-buttons/js/dataTables.buttons.js',
  'node_modules/datatables.net-autofill/js/dataTables.autoFill.js',
], 'public/js')
  .sass('resources/assets/sass/app.scss', 'public/css');
javascriptlaravel-5webpackbootstrap-4

Answer №1

I encountered the same issue and was able to resolve it by:

First, make sure to install popper.js:

npm install popper.js --save

Next, ensure that you load popper.js before the bootstrap file in resources/asset/js/bootstrap.js

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

Also remember to include the following in webpack.mix.js:

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

There are multiple approaches to solving this issue. For more information, you can visit:

https://github.com/FezVrasta/popper.js/issues/287

Answer №2

Having encountered the same problem, I managed to resolve it successfully.

The solution involved making a modification to the following line in resources/asset/js/bootstrap.js

window._ = require('lodash');

// new line #1
import Popper from 'popper.js/dist/umd/popper.js';

/**
 * 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.
 */

try {
    window.$ = window.jQuery = require('jquery');
    
    // new line #2 and #3
    window.Popper = Popper;
    require('bootstrap');
} catch (e) {}

For a more detailed guide, you can refer to this resource

Hopefully, this solution will prove helpful in resolving your issue too :)

Answer №3

Even after trying various solutions for the issue at hand, I continued to face the same error. However, I eventually found a resolution that worked for me:

Specifically tailored for Laravel 5.8

bootstrap.js

window._ = require('lodash');
import Popper from 'popper.js/dist/umd/popper.js'; ///<------ don't forget to include this line

try {
    window.Popper = Popper; //<------ make sure to add this line as well
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

webpack.mix.js

mix.js('resources/js/app.js', 'public/js').sourceMaps(); //<------ remember to add this line and remove any other mix.js lines

Answer №4

Here's a new approach for using Laravel 9.x with Laravel Mix 6.x

npm install --save-dev bootstrap@^4

Update your app.js file:

window.Popper = require('popper.js');
window.bootstrap = require('bootstrap');

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can JavaScript effectively retrieve the JPEG comment from a JPEG file?

How can one properly retrieve the JPEG comment field (not EXIF, but the COM field) from a JPEG file using JavaScript, particularly when running node on the command line? While there are several libraries available for reading EXIF data in JavaScript, I ha ...

javascriptnode.jsimagenpmjpeg

Set a variable in Node.js to capture the return value of res.json

Embarking on the creation of a social network using Node.js, I must admit that I am quite new to this field. This marks my inaugural post on the subject and I sincerely hope for your understanding. Within my social network project, I aim to implement an a ...

javascriptnode.jsexpress

Steps to Extract the key value from the parseJson() function

Could someone assist me in retrieving the value of the "id_user" key from the script provided below? JSON.parse({ "data": [ { "id_user": "351023", "name": "", "age": "29", "link": "http://domain. ...

javascriptjqueryjson

Developing a Prototype for an Angular Directive

After following instructions from a question on Stack Overflow, I have updated my application configuration with the code snippet below: $provide.decorator('formDirective', function($delegate) { var directive = $delegate[0]; directive.contro ...

javascriptangularjsprototype

Is it possible for the number returned by setTimeout() in JavaScript to be negative?

Is it possible for a number returned by the setTimeout() function in JavaScript to be negative? Currently, I've observed that the timeoutIds generated are sequentially numbered in Chrome as 1,2,3,4,5,6... While in Firefox, they start from number 4 an ...

javascript

Deactivating one div's class upon clicking on another div

Below is the HTML code snippet: <div class="container"> <ul class="navbar"> <li class="nb-link"><a>Home</a></li> <li class="dropdown"> <a>CBSE</a> <ul class="dropdown-menu"&g ...

javascriptjqueryhtmlcss

Can object methods be called using inline event attributes in an HTML tag?

Exploring the depths of core JavaScript has been my latest obsession. It's fascinating how we can easily trigger functions within the global context using events like this. HTML <span class="name" onclick="clicked()">Name</span> JavaSc ...

javascriptjqueryhtml

Tips on implementing jQuery in a JavaScript file referenced in angular.json

Currently, I am utilizing a JavaScript file that incorporates jQuery within it. In order to employ this JavaScript file, I have included it in the scripts array within the angular.json file. Additionally, I have also included jQuery in the same array befor ...

javascriptjqueryangularangular8

recoil struggles to manage the error thrown by an asynchronous selector

Recoil offers the ability for users to throw errors in async selectors. For more information, please refer to the documentation. Both "<ErrorBoundary>" and "useRecoilValueLoadable()" can handle errors from async selectors, but I encountered issues w ...

javascriptreactjsasynchronousselectorrecoiljs

What is causing my Node JS app to only show the initial JSON object?

Having an issue with my Node application while writing a JSON object and integrating the Twilio API. The console log displays all objects properly, but when written to the document, only the first object is visible. Can anyone help me figure out why this d ...

javascriptjsonnode.jstwilio

What is the best way to vertically align a container beneath a navbar without triggering the appearance of a scrollbar?

I'm in the process of developing an application using Bootstrap 4. The app features a navigation bar and a container located beneath it. Below you'll find the structure of the application: <body> <div id="root"> ...

htmlcssbootstrap-4

The class "pagination pagination-lg" from the link https://angular-ui.github.io/bootstrap/#/pagination seems to be malfunctioning in Bootstrap 4

Just starting out with angularjs and I'm trying to implement pagination using https://angular-ui.github.io/bootstrap/#/pagination. However, I'm facing an issue where the style class "pagination pagination-lg" is not applying properly. I'm cu ...

cssangularjsangular-ui-bootstrapbootstrap-4

A Node.js feature that enables atomic file replacement, triggering watchers only once

I have a unique scenario where I need to handle two types of processes. One process is responsible for writing a file, while the other processes are required to read it whenever there is a change. In my research, I came across fs.watch as a solution to ke ...

javascriptnode.jswatch

Attempting to dynamically link my "ng-true-value" in AngularJS

Working with values retrieved from a database, my goal is to include a checkbox, load the description, and provide 2 text boxes – one editable and the other read-only. Both text boxes initially display values from the database. When the checkbox is chec ...

c#javascriptangularjsmodel-view-controller

Angular Bootstrapped Navbar with Tab-style Links

I have been working on a project with a specific example: Routing example In my app.component.html file, I made a modification from: <ul class="nav nav-tabs"> to <ul class="nav nav-pills"> Now, the tabs have the appearance of pills. Next ...

bootstrap-4angular8

Encountering Reference Error while Using AWS Amplify with Nuxt.js: Navigator Undefined

Currently, I am experimenting with Nuxt.js and AWS Amplify to leverage the benefits of SSR/SEO for my project. I have successfully integrated Amplify into my project and followed the "Manual Configuration" steps outlined in the Amplify Docs to set it up. ...

javascriptamazon-web-servicesvue.jsvuejs2nuxt.js

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

Understanding the use of promises in Angular for handling async operations is crucial, but I'm struggling to implement it effectively in this scenario. function fetchLineGraphData(promises){ var dataPoints = []; for (var i = 0; i < promise ...

javascriptajaxangularjs

Launching a call to action through Ajax in Zend Framework triggers a redirect, but subsequent calls prove to be effective

I've encountered an intriguing issue that I'm hoping someone else has come across and resolved before. In this particular application, I have implemented a 'change my password' option for users. If a user forgets their password, they c ...

javascriptajaxzend-frameworkjquery

Align a span vertically within a div

I need help aligning the content "ABC Company" vertically within a div using Bootstrap 4's alignment helper classes. Despite my efforts, I have not been successful. Here is the code I am using: <div class="container" style="width: 740px;"> < ...

htmlcsstwitter-bootstrapbootstrap-4

JavaScript's Selenium WebDriver - Explicit Waiting

Currently, I am utilizing selenium-webdriverjs. My objective is to pause until a specific element is displayed. To accomplish this, I have implemented an explicit wait that operates effectively: var shown = false; driver.wait(function(){ driver.findEl ...

javascriptselenium-webdriver