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"
  }
}

Could you remove "window.jQuery": 'jquery', if you are not using Angular. and just Try — Pravesh Khatri
– Pravesh Khatri, Commented Nov 24, 2017 at 8:54
I don't think there is any way to use plugins from your webpack bundle in external scripts. Maybe removing jquery from your webpack configuration and manually include jquery in your .html file will do the trick? — Rick
– Rick, Commented Nov 24, 2017 at 8:56

jshbrntt · Accepted Answer · 2017-11-24 14:55:45Z

24

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: '$'
    }]
  }]
}

answered Nov 24, 2017 at 14:55

jshbrntt

5,4858 gold badges33 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

grazdev Over a year ago

YES! Perfect! Thank you so much!

Matt Gumbley Over a year ago

I found adding this in the rule set: { test: require.resolve("jquery"), loader: "expose-loader", options: { exposes: ["$", "jQuery"], }, }, Then adding import $ from "jquery"; as the first line of my entry-point app.ts (I'm using ts-loader to transpile) helped.

Collectives™ on Stack Overflow

jQuery is not defined (using Webpack)

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related