Menu
I am trying to compile my Laravel Project with Laravel-Mix, but i get a problem where jQuery is not autoloaded in the browser even with the mix.autoload directive:
bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6
As you can see, i include bootstrap in a script tag at the bottom of the page, and jquery is part on my dependencies in npm package.json.
index.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Test</title>
</head>
<body>
<p>Hello</p>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script src="{{ asset(mix('js/bundle.js')) }}" type="text/javascript"></script>
</body>
</html>
webpack.mix.js
const { mix } = require('laravel-mix');
mix.autoload({
jquery: ['$', 'jQuery', 'window.jQuery'],
});
mix.js(['assets/js/script.js'], 'public/js/bundle.js');
if (mix.inProduction()) {
mix.disableNotifications();
mix.version();
}
206
Install jQuery and Popper.
npm i jquery
npm i popper.js
In your /resources/js/bootstrap.js.
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
In webpack.mix.js.
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
In your Blade template.
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With