nicklaw5's avatar

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

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.

0 likes
6 replies
nicklaw5's avatar
nicklaw5
OP
8 years ago
Best Answer
Level 1

Solved!

After further googling, I came across the following config:

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

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

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

Which equates to the following when using mix.autoload():

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

mix.autoload({
 jquery: ['$', '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();

Happy coding!

3 likes
kwhat4's avatar

Sigh, this solution does not seem to work for me, nor have I had any luck with the several other "solutions" I have found posted around the internet. The longer I uses these tools, the more I want to just quit software development after investing the last 25 years.

2 likes
lightyagami's avatar

this is really a common issue when using Laravel mix, i'm not sure why this happens, actually i'm in a project where we have submodules of laravel, each with your own laravel mix, and that issue is very common. so to all folks here, when using jQuery you have several ways to solve it:

export your vendors

you can export your vendors from node_modules using the copy or copyDirectory option of Laravel mix.

make any plugin global

in your app.js you can define any imported plugin as global. after install that plugin try this:

global.pluginName = require('pluginName');

jQuery as the king of all sh*t

is a common issue, jquery not be loaded, so you can solve it like:

webpack.mix.js

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

app.js

global.$ = global.jQuery = require('jquery');
5 likes
lightyagami's avatar

don't stay upset, those problems are more common that you think, even to pro devs

sandwich's avatar

This (LIGHTYAGAMI's solution) worked, thank you!!

Please or to participate in this conversation.