Laravel Mix - Required jQuery plugins can't be found

I posted similar question, if only people would response :/

Hi, its easy, Laravel Mix ships with jQuery autoloading out of the box. All what you need is call mix.autoload before you try to compile other JavaScript files. for ex. mix.autoload({ 'jquery': ['window.$', 'window.jQuery'] }); mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css');

Maybe my answer on this question will give you an idea.

_bootstrap.js needs to be required before require('fullcalendar');

@hendranucleo I checked the post, but I'm already using require('fullcalendar'), but unsuccessfully. Any other ideas, anyone?

@dugajean, Sorry, this is via npm install or file download? if you using *vue aka vue component, require the fullcalendar before export.

@hendranucleo This is a npm install and Vue is not being used at all.

At my end i have no problem load fullcalendar. With very minimal setup.

bootstrap.js

window.$ = window.jQuery = require('jquery');
window.Pace = require('node-pace-progress');
/**
 * 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.
 */

require('fullcalendar')

window.axios = require('axios');

window.axios.defaults.headers.common = {
    'X-CSRF-TOKEN': window.fyi.csrfToken,
    'X-Requested-With': 'XMLHttpRequest'
};

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from "laravel-echo"

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });

$('#xxx').fullCalendar();

Laravel Blade

<div id="xxx"></div> 

test.scss

@import "../../../../node_modules/fullcalendar/dist/fullcalendar.css";

Note, even i didnt load moment.js as per instruction it still working.

http://i.imgsafe.org/9cb5129be4.png

Check your script orders, maybe you call $('#some_el').fullCalendar() before you load fullCalendar it self.

You can use this method if you need global availability in your project.

https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md

Not sure if this will help but I was having some problems getting the bootstrap jQuery plugins to work in 5.4 when upgrading a project.

adding mix.autoload({}); before everything else in the webpack.mix.js file seems to have solved the issue for me.

Adding mix.autoload({}); didn't help here. I'm trying to do the same thing @robgoodliffe with bootstrap 4. :/

replace window.$ to global.$ in app.js /bootstrap.js etc //window.$ = window.jQuery = require('jquery') global.$ = global.jQuery = require('jquery')

For all the future googlers, I solved the problem with

mix.autoload({
    jquery: ['$', 'window.jQuery',"jQuery","window.$","jquery","window.jquery"]
});

I tried whatever mentioned I still have the problem. I noticed php storm specify an error with const { mix } = require('laravel-mix'); line and told my version of javascript does not support this

@itsali Change your javascript version on setting to Ecmascript6