nicklaw5
2 years ago

jQuery and laravel-mix - Why you no work??? (ノಠ益ಠ)ノ彡┻━┻

Posted 2 years ago by nicklaw5

I have been using Gulp for asset builds for the past few years and have decided to give webpack/laravel-mix a go on a new project. Below lists the various techniques I have attempted in order to make jQuery available to my other JS assets. However, none of them seem to do the job.

1 - Simple file concatenation:

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

mix.js([
 'node_modules/jquery/dist/jquery.js',
 'node_modules/bootstrap/dist/js/bootstrap.js',
 'resources/assets/web/js/web.js',
], 'public/assets/web/js/web.js').version();

For some reason, when I run yarn run dev the output file does not contain jQuery at the top of the file and therefore bootstrap doesn't recognise it.

2 - Autoloading using laravel-mix:

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

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

mix.js([
 'node_modules/bootstrap/dist/js/bootstrap.js',
 'resources/assets/web/js/web.js',
], 'public/assets/web/js/web.js').version();

Which results in the following console error when loaded in the browser: Bootstrap's JavaScript requires jQuery.

3 - Webpack's ProvidePlugin config:

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

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

mix.js([
 'node_modules/bootstrap/dist/js/bootstrap.js',
 'resources/assets/web/js/web.js',
], 'public/assets/web/js/web.js').version();

This seems to work for jQuery, but $ is still undefined.

4 - Resolving the dependency via webpack config

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

mix.webpackConfig({
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
});

Here I get the same error as the above 2: Bootstrap's JavaScript requires jQuery.

After googling around these 4 above approaches seem to be the most common. Am I doing something wrong? Please help!

Thanks in advanced.

Please sign in or create an account to participate in this conversation.