'Uncaught ReferenceError: jQuery is not defined' when using webpack

[mark-norgate]

I am writing an app using Angular 2, webpack and I am using the icheck front-end library.

I am requiring them in my component thusly:

var jQuery: any = require("jquery");
require('../../../js/jquery.icheck.min.js');
require('../../../css/checkbox/orange.css');

I have also tried like this:

require("jquery");
require('../../../js/jquery.icheck.min.js');
require('../../../css/checkbox/orange.css');

This builds successfully using the webpack server and npm, but I get an error in the browser:

Uncaught ReferenceError: jQuery is not defined (jquery.min.icheck.js:11)

I have used this plugin before in an Angular 2 component but I never had any problems like this. I have compared the current app with the working app and I can't see any differences; it should work!

I am really up against it now and have to get this prepared for Monday. Anyone have any problems like this?

[pherrymason]

Try this:

var $ = require('jquery');
window.jQuery = $;
require('../../../js/jquery.icheck.min.js');
require('../../../css/checkbox/orange.css');

iCheck is not ready neither for AMD nor CommonJS module system so it expects jQuery to be defined in the window object.

[cnlevy]

I had the same problem with bootstrap-switch I followed @raulferras advice which did solve my problem Then i added the following in webpack.config.js

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

and it now works without workarounds

[gaurav123337]

Thanks a lot. :+1: raulferras

[farin]

FYI, for me, provide plugin plugin works only without window.

plugins: [
  new webpack.ProvidePlugin({
      $: "jquery",
      jQuery: "jquery"
    })
]

Anyway, Thx :+1:

[maqduni]

You could also use expose-loader. The example below is written for webpack 2,

module: {
    rules: [
      { test: /[\/]jquery\.js$/, use: 'expose-loader?$!expose?jQuery' }
    ]
  },