jQuery is not defined

So I discovered that if I change webpack.mix.js to:

const 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.
 |
 */
const webpack = require('webpack');

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            '$': 'jquery',
            'jQuery': 'jquery',
            'window.jQuery': 'jquery',
        }),
    ]
});

mix.js([
    'resources/js/vendor/select2/select2.js',
    'resources/js/vendor/pikaday/pikaday.js',
    'resources/js/app.js'
    ], 'public/js/app.js')
    // .extract([
    //     'jquery'
    // ])
    .autoload({
        jquery: ['$', 'window.jQuery']
        // jquery: ['$', 'window.$', 'window.jQuery']
    })
    .sass('resources/sass/app.scss', 'public/css');

the jQuery is not defined is not there. But then the next problem is:

Pikaday is not defined

I am 100% sure the file resources/js/vendor/pikaday/pikaday.js is there. So what is going on now?

The problem lies in this line

global.$ = global.jQuery = require('jquery');

You add $ and jQuery but in your autoload you only add $ and window.jQuery. You need to add jQuery as well in the autoload

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

Thanks for the help. Your suggestion unfortunately doesn't change anything.

Now I have

window._ = require('lodash');

/**
 * 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';

/**
 * 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.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });


// window.$ = window.jQuery = require('jquery');

global.$ = global.jQuery = require('jquery');

and

const 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/js/vendor/select2/select2.js',
    'resources/js/vendor/pikaday/pikaday.js',
    'resources/js/app.js'
    ], 'public/js/app.js')
    .extract([
        'jquery'
    ])
    // .autoload({
    //     jquery: ['$', 'window.jQuery']
    //     // jquery: ['$', 'window.$', 'window.jQuery']
    // })
    .autoload({
        jquery: ['$', 'jQuery', 'window.jQuery']
    })
    .sass('resources/sass/app.scss', 'public/css');