jQuery is not defined (using Webpack)

Question

I have three scripts:

<script type="text/javascript" src="main.min.js"></script>

<script type="text/javascript" src="script-A.js"></script>

<script type="text/javascript" src="script-B.js"></script>

main.min.js

is a file I create with Webpack. This file includes all the scripts I need for my project, including jQuery, which I have installed as a NPM package.

script-A.js

and

script-B.js

are scripts that unfortunately I can't include in my main Webpack file, so I need to load them separately. These scripts need jQuery as a dependency; but even though jQuery is included in

main.min.js

, I get a

jQuery is not defined

error when they are invoked.

By the way, in my Webpack file I already have these lines of code, which let me use jQuery in any script I handle through Webpack, but it doesn't seem to have any effect on the other scripts:

new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

    "window.jQuery": 'jquery'

})

How can I fix the error? Ideally, I need a solution where I don't have to touch

script-A.js

and

script-B.js

since they belong to a plugin.

CONSOLE SNIPPET

Uncaught ReferenceError: jQuery is not defined

    at script-A.js?ver=2.9.6:1

Uncaught ReferenceError: jQuery is not defined

    at script-B.js:617

    at script-B.js:620

PACKAJGE.JSON

{

  "name": "mysite",

  "version": "1.0.0",

  "description": "mysite",

  "main": "webpack.config.js",

  "scripts": {

    "test": "echo \"Error: no test specified\" && exit 1"

  },

  "author": "",

  "license": "ISC",

  "dependencies": {

    "jquery": "^3.2.1",

    "jquery-lazy": "^1.7.5",

    "salvattore": "^1.0.9",

    "webpack": "^3.6.0"

  },

  "devDependencies": {

    "babel-core": "^6.26.0",

    "babel-loader": "^7.1.2",

    "babel-preset-es2015": "^6.24.1",

    "browser-sync": "^2.18.13",

    "browser-sync-webpack-plugin": "^1.2.0",

    "css-loader": "^0.28.7",

    "extract-text-webpack-plugin": "^3.0.1",

    "file-loader": "^1.1.5",

    "node-sass": "^4.5.3",

    "sass-loader": "^6.0.6",

    "style-loader": "^0.19.0",

    "url-loader": "^0.6.2",

    "webpack-merge": "^4.1.0"

  }

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You need to make use of the expose-loader in order to make jQuery available to the other scripts on the global scope.

module: {
  rules: [{
    test: require.resolve('jquery'),
    use: [{
        loader: 'expose-loader',
        options: 'jQuery'
    },{
        loader: 'expose-loader',
        options: '$'
    }]
  }]
}

jQuery is not defined (using Webpack)

Sign up