Can't get any packages to work with Laravel Mix - laravel

Question

I can't figure out how to include JavaScript packages in my Laravel project. I've been trying to install packages, and I can't figure out how it works. For example: Let's say I want to install Bootstrap Confirmation (http://bootstrap-confirmation.js.org/).
I install it from my project root folder.
$ npm install bootstrap-confirmation2
After that, the package.json file looks like the following.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.0.0",
"cross-env": "^5.2.0",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.15.0",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10"
},
"dependencies": {
"#types/bootbox": "^4.4.36",
"bootbox": "^5.1.2",
"bootstrap-confirmation2": "^4.1.0"
}
}
I then add the package to app.js.
require('bootstrap-confirmation2');
And my webpack.mix.js looks like this:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
After that, I run this from my console:
npm run dev
If I try to use my Bootstrap confirmation package it doesn't work, no errors, nothing.
<button class="btn btn-default" data-toggle="confirmation">Confirmation</button>
I know the problem is not in the package but in the way I try to install packages and including them in my app.js file that is loaded once I open the app.
I checked the 'Network' tab in Chrome dev tools, checked that 'app.js' is loaded, searched the file and the package I installed and included is INSIDE the JS file and it still doesn't work.
Any help is appreciated.

Answer 1

In the terminal, run the following install.
npm install bootstrap-confirmation2
The package.json should now look something like the following. Dependencies are jQuery, Popper.js (for Bootstrap 4), and of course, Bootstrap 4.
"dependencies": {
"bootstrap": "^4.3.1",
"bootstrap-confirmation2": "^4.1.0",
"jquery": "^3.4.0",
"laravel-mix": "^4.0.15",
"popper.js": "^1.15.0"
webpack.mix.js
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
app.css
// Variables
#import 'variables';
// Bootstrap
#import '~bootstrap/scss/bootstrap';
app.js
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
require('bootstrap-confirmation2');
} catch (e) {}
In your Blade template/layout:
<a class="btn btn-large btn-primary" data-toggle="confirmation" data-title="Open Google?"
href="https://google.com" target="_blank">Confirmation</a>
At the end of the file, after the closing body tag:
</body>
<script src="{{ mix('js/app.js') }}"></script>
In app.js...
$('[data-toggle=confirmation]').confirmation({
rootSelector: '[data-toggle=confirmation]',
// other options
});
At the terminal:
npm run prod
I hope that helped.