3

I am using Webpack 4 for the build process of my React app. My app uses jQuery and I want to import jQuery plugin but get the following error:

Failed to compile.

./jquery-plugin.js
  Line 3:  'jQuery' is not defined  no-undef

I've tried the methods described here and here but neither helped me.

// app.js

import $ from 'jquery';
// import './jquery-plugin.js';
window.$ = window.jQuery = $;

require('./jquery-plugin.js');

// jquery-plugin.js

(function($) {
  // Plugin code
})(jQuery);

If I understand this approach works correctly in the previous Webpack versions.

If I add import jQuery from 'jquery' to jquery-plugin.js for test it works fine but I cannot do this since it is 3rd party plugin.

Does anyone have ideas how to make jQuery visible globally in Webpack 4?

UPD:

I use react-app-rewired for override Webpack config. Here is my config:

// config-overrides.js

const webpack = require('webpack');

module.exports = function override(config, env) {
  //do stuff with the webpack config...

  config.module.rules.push({
    // Exposes jQuery for use outside Webpack build
    test: require.resolve('jquery'),
    use: [{
      loader: 'expose-loader',
      options: 'jQuery'
    },{
      loader: 'expose-loader',
      options: '$'
    }]
  });

  config.plugins.push(
    new webpack.ProvidePlugin({
    //provide jquery in all the ways 3rd party plugins might look for it (note that window.$/window.jQuery will not actually set it on the window, which is cool)
    '$': 'jquery',
    'jQuery': 'jquery',
    'window.jQuery': 'jquery',
    'window.$': 'jquery'
  }));

  config.resolve = {
    alias: {
      'jquery-ui': 'jquery-ui-dist/jquery-ui.js'
    },
  };

  return config;
};
Serhii Popov
  • 3,326
  • 2
  • 25
  • 36

1 Answers1

0

you need to let webpack know it's a global:

import { ProvidePlugin } from 'webpack';

and then in the plugins entry of your config:

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

that should fix the issue in jquery-plugin.js and you also won't need to import jquery anywhere

ic3b3rg
  • 14,629
  • 4
  • 30
  • 53
  • Updated my question. – Serhii Popov Dec 23 '18 at 19:31
  • `window.jQuery` and `window.$` in the `ProvidePlugin` config are redundant. The error message you're getting looks like an eslint issue - make sure `$` and `jQuery` are in the `globals` section of your eslint config – ic3b3rg Dec 23 '18 at 19:38
  • I've created `.eslintrc` in project root, added `{ "env": { "jquery": true }, "globals": { "jQuery": true, "$": true } }`, re-run `npm start` but nothing changed. Maybe, did you mean something else under *make sure $ and jQuery are in the globals section of your eslint config*? – Serhii Popov Dec 23 '18 at 19:56
  • No, that's what I meant. Is `jquery` in your `package.json`? – ic3b3rg Dec 23 '18 at 19:57
  • Yes, I have `"jquery": "^3.3.1",` – Serhii Popov Dec 23 '18 at 20:00
  • have you tried removing `window.jQuery` and `window.$` form the `ProvidePlugin` config? – ic3b3rg Dec 23 '18 at 20:04
  • Yes, I've removed these two lines. I also was trying different settings in my configuration and nothing helped me. Maybe does it works something else in Webpack 4? – Serhii Popov Dec 24 '18 at 09:50