Laravel-mix: jQuery via ProvidePlugin issue

Created on 14 Jan 2017 · 9Comments · Source: JeffreyWay/laravel-mix

Hello, after this commit https://github.com/JeffreyWay/laravel-mix/commit/6e1ec3dcd4c3f4408c4ee119d70a1eb7ce6d450e I get error when compiling my assets.

The problem is that I do not use jquery but for example in Dropzone.js is this code.

if (typeof jQuery !== "undefined" && jQuery !== null) {
    jQuery.fn.dropzone = function(options) {
      return this.each(function() {
        return new Dropzone(this, options);
      });
    };
  }

so webpack require jquery but this ended with error.

Error:

Can't resolve 'jquery' in 'C:\xampp\htdocs\Moje\WEBSITES\VueShop\node_modules\dropzone\dist'

What about some provideJquery() function added to Laravel Mix for these who need this, or maybe there is other better solution.

Maybe is problem with Dropzone.js, how they determine if there is Jquery.

Source

natocTo

Most helpful comment

I suggest using the following API:

mix.autoload({  // or Mix.autoload() ?
  'jquery': ['$', 'window.jQuery', 'jQuery'],
  'tether': ['window.Tether', 'Tether'],
});

Where the key is the node module and the value is an array of vars to reference it.

QWp6t on 19 Jan 2017

👍14

All 9 comments

The problem here is that most scripts will expect jQuery to be in the global window scope, the fix is to add "window.jQuery": 'jquery' to ProvidePlugin in webpack.config.js

...
new webpack.ProvidePlugin({
        jQuery: 'jquery',
        $: 'jquery',
        jquery: 'jquery',
        "window.jQuery": 'jquery'
    }),
....

I had the same issue, I'll submit a PR soon, but if it doesn't get accepted this worked for me.

eblin on 14 Jan 2017

I have not jquery in my project. But because that check, webpack trying require that which end with error.

Maybe the best solution is copy webpack config and just remove this plugin when I do not need it.

natocTo on 14 Jan 2017

Yeah, hmm... will have to think about what to do here.

JeffreyWay on 14 Jan 2017

Ah my bad sorry! I can't believe I missed that lol.

Anyways, this would have to be configurable I guess, that way the entire object passed to ProvidePlugin could be set by the developer.

something like ... Mix.autoloadModules({...})

eblin on 14 Jan 2017

I suggest using the following API:

mix.autoload({  // or Mix.autoload() ?
  'jquery': ['$', 'window.jQuery', 'jQuery'],
  'tether': ['window.Tether', 'Tether'],
});

Where the key is the node module and the value is an array of vars to reference it.

QWp6t on 19 Jan 2017

👍14

I encountered this issue when using Laravel Echo too. I quite like the mix.autoload idea.

thecrypticace on 20 Jan 2017

Closing this, as Jordan has a separate PR for us to review.

JeffreyWay on 22 Jan 2017

I have an issue with jquery-ui-bundle not working. In Laravel 5.2 I was using this in app.js
window.$ = window.jQuery = require('jquery');require('jquery-ui-bundle');
I switched to:

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

in webpack but I can't declare jquery twice to add jquery-ui-bundle.
Leaving this line in app.js doesn't do the trick
window.$ = window.jQuery = require('jquery-ui-bundle');
The bundle is mixed in app.js but not present in windows as I get autocomplete is not a function error. How can I autoload the bundle along jquery?

chriz74x on 18 Jan 2018

I suggest using the following API:
mix.autoload({  // or Mix.autoload() ?
  'jquery': ['$', 'window.jQuery', 'jQuery'],
  'tether': ['window.Tether', 'Tether'],
});
Where the key is the node module and the value is an array of vars to reference it.

Thanks man