Expose jQuery to real Window object with Webpack

Question

I want to expose the jQuery object to the global window object that is accessible inside the developer console in the browser. Now in my webpack config I have following lines:

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

These lines add the jQuery definitions to each file in my webpack modules. But when I build the project and try to access jQuery in the developer console like this:

window.$;
window.jQuery;

it says that these properties are undefined...

Is there a way to fix this?

Answer 1

You need to use the expose-loader.

npm install expose-loader --save-dev

You can either do this when you require it:

require("expose?$!jquery");

or you can do this in your config:

loaders: [
    { test: require.resolve('jquery'), loader: 'expose?jQuery!expose?$' }
]

UPDATE: As of webpack 2, you need to use expose-loader instead of expose:

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

Answer 2

The ProvidePlugin replaces a symbol in another source through the respective import, but does not expose the symbol on the global namespace. A classic example are jQuery plugins. Most of them just expect jQuery to be defined globally. With the ProvidePlugin you would make sure that jQuery is a dependency (e.g. loaded before) and the occurence of jQuery in their code would be replaced with the webpack raw equivalent of require('jquery').

If you have external scripts relying on the symbol to be in the global namespace (like let's say an externally hosted JS, Javascript calls in Selenium or simply accessing the symbol in the browser's console) you want to use the expose-loader instead.

In short: ProvidePlugin manages build-time dependencies to global symbols whereas the expose-loader manages runtime dependencies to global symbols.

Answer 3

Looks like the window object is exposed in all modules.

Why not just import/require JQuery and put:

window.$ = window.JQuery = JQuery;

You will need to ensure that this happens before requiring/importing any module that makes use of window.JQuery, either in a requiring module or in the module where it's being used.

Answer 4

This always worked for me. including for webpack 3 window.$ = window.jQuery = require("jquery");

Answer 5

None of the above worked for me. (and I really don't like the expose-loader syntax). Instead,

I added to webpack.config.js:

var webpack = require('webpack');
module.exports = {
   plugins: [
       new webpack.ProvidePlugin({
           $: 'jquery',
       })     
   ]
}

Than all modules have access through jQuery through $.

You can expose it to the window by adding the following to any of your modules bundled by webpack:

window.$ = window.jQuery = $

Answer 6

Update for Webpack v2

Install expose-loader as described by Matt Derrick:

npm install expose-loader --save-dev

Then insert the following snippet in your webpack.config.js:

module.exports = {
    entry: {
        // ...
    },
    output: {
        // ...
    },
    module: {
        loaders: [
                { test: require.resolve("jquery"), loader: "expose-loader?$!expose-loader?jQuery" }
        ]
    }
};

(from the expose-loader docs)

Answer 7

In my case works

{ test: require.resolve("jquery"), loader: "expose?$!expose?jQuery" } 

Answer 8

Update for Webpack v2

After webpack 5 upgrade, you could face this warning.

[DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[7].use[0].options)

Simply change the options to

options: {
 exposes: ["$", "jQuery"],
}

will look like this:

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

Answer 9

I mixed up bundled typescript code (webpack) with js scripts on page. It leads into problem. jQuery is duplicated - one is in compiled code and second is required by CDN scripts.

In case you use encore (link) you can do provide one jQuery in two steps. Without encore you an use provide plugin (link)

// webpack.config.js
Encore
    .autoProvidejQuery() // adds $ and jQuery into every bundled file

// index.ts
// @ts-ignore
global.window.$ = global.window.jQuery = $;