webpack: Webpack gives $ is not defined or jQuery is not defined error in console

Just use like this

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

or add to webpack

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

I dont know if this does anything but the datetime picker and other scripts in the console are script tags pointing to cdn’s in the html file

@pfftdammitchris Externals

webpack.config.js

externals: {
  jquery: 'jQuery'
}

Is the console output from devTools or Terminal ? Is the bundle referenced after the CDN <script>'s (JQuery Plugins)

These questions are also better suited for StackOverflow 😛

If you just want this damn thing working:

  // expose jquery's $ for imports
  plugins: [
     new webpack.ProvidePlugin({
       $: 'jquery',
       jQuery: 'jquery'
     })
  ]

In your JS where you’re importing, preferably at top of file:

import $ from 'jquery';  
window.jQuery = $; window.$ = $;

@paulcalabro @nathanpurcell @dlo

For every module webpack imports it wraps it in a function and it passes it a custom module and exports object.

Crank open your webpack output and the import for jQuery will look something like this:

function(module, exports){
 //jQuery library
}

So why do we need to assign the library to a variable and then expose it on window? I thought jQuery does that for us?

It does, but only if module.exports is undefined. If module.exports is defined – which it will be with our webpack import – module.exports = jQuery.

Unfortunately, to discover this you need to dig into the jquery library(however, the code we’re interested in is conveniently at the top and bottom of the file).

if (typeof module === "object" && typeof module.exports === "object") {
    module.exports = global.document ?
        factory(global, true) : // THIS WILL BE CALLED IN OUR WEBPACK OUTPUT
        function(w) {
            if (!w.document) {
                throw new Error("jQuery requires a window with a document");
            }
            return factory(w);
        };
} else {
    factory(global); // THIS WOULD NORMALLY BE CALLED IN A BROWSER ENVIROMENT
}

and down the very bottom of the library:

// as noGlobal is true, this won't be called
if ( !noGlobal ) {
    window.jQuery = window.$ = jQuery;
}

global.$ = require("jquery")

new webpack.ProvidePlugin({ $: ‘jquery’, jQuery: ‘jquery’ })

alone is not working.

So everything in my webpack chunk functions as expected, however, I wasn’t able to access jQuery/$ in the JavaScript console until I followed @ptflp 's advice above and added this to my app.js:

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

How come the script being loaded in my webpage doesn’t expose jQuery/$? (i.e. why do I need line 2 & 3 above?)

Bump for a bit of an explanation? I thought it might have been because jQuery wasn’t being loaded until later… I’ve seen the workarounds but i’d like to understand in case I come across this again

Still Doesn’t work even when I re-edited to fit that criteria and added in the externals part

yeah thought so tbh 😛 , it’s not enough information to fix it properly

index.html

  <script src="cdn/jquery.min.js"></script>
  <script src="cdn/jquery-plugin.min.js"></script>
  ...
  <script src="cdn/bootstrap.min.js"></script>
  <script src="bundle.js"></script> // Logic only with externals

The question is why webpack then , you don’t really need it if most of the deps are referenced via a CDN anyways. Otherwise

index.html

  <script src="index.bundle.js"></script> // Libs + Logic

index.js

import $ from 'jquery'
import boostrap from 'bootstrap'

import plugin from 'jquery-plugin'
...

$()...

I’m using Webpack 4.1.0 within an ejected create-react-app project:

First I installed the library:

npm install jquery

Then I added the following to config\webpack.config.js (this alone is already enough)

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

…but it was also necessary to add an .eslint.rc file to the project root - and register jquery - in order to prevent a console error.

module.exports = {
  parser: "babel-eslint",
  parserOptions: {
    ecmaVersion: 2017,
    sourceType: "module",
    allowImportExportEverywhere: true
  },
  env: {
    es6: true,
    browser: true,
    jquery: true
  }
};

Still not working.

This is soo stupid a normal import jquery does not work… Made both modifications to webpack.config and the import $ part restarted node static generator.

ReferenceError: jQuery is not defined
ReferenceError: $ is not defined

This frustrates me amazingly

What do you mean by “use jQuery directly”?

If that means be able to use jQuery in the browsers dev tools console, I had to “expose it” using this type of logic shown on stack exchange:

https://stackoverflow.com/a/29083197

Expose-loader info here:

https://webpack.js.org/loaders/expose-loader/

Hope that helps.

```js
global.$ = require("jquery")

Worked for me,TY dude.

I don’t see how you are using Bootstrap (no import?), but if it’s loaded through a script tag, expose-loader would work.

Note that support questions should go to Stack Overflow as per instructions.

Tried everything on this page but nothing seems to work. It’s a really big issue with webpack and also the only issue that is bugging a lot.

Install with npm jquery and paste the code below to webpack.config.js

...
    resolve: {
        alias: {
            'jquery': path.join(__dirname, '/node_modules/jquery/dist/jquery.min.js')
        }
    },
    plugins: [ new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
    }) ]
...

And import this code to main file.

var $ = require('jquery');

So it worked for me.

I have this in webpack.config.js and I can’t do any of the the normal troubleshooting using $("#selector") in chrome dev tools console:

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

I get errors like this:

Uncaught TypeError: $(…).removeClass is not a function

You need to use expose-loader in webpack

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

Ref: https://stackoverflow.com/questions/47469228/jquery-is-not-defined-using-webpack

global.$ = require(“jquery”); Didn’t work for me any other suggestions?

Adding both of these lines to the entry js worked for me:

global.$ = require("jquery");
global.jQuery = global.$;

global.$ = require(“jquery”); Didn’t work for me any other suggestions?

@Elia-Sh I just went with adding

global.$ = require("jquery");

And moved on since it worked. Webpack can definitely be frustrating at times, but overall worth the extra effort. I suspect this isn’t going to be high on the list of things to address because the JS world is very anti-jquery these days.

This thread was very helpful. I spent a long time trying to solve this. This worked for me:

in webpack config:

new webpack.ProvidePlugin({
	$: "jquery",
	jQuery: "jquery",
	"window.jQuery": "jquery",
});

in entrypoint:

global.$ = require("jquery");

perplexingly, jquery does work in the app w/o that global.$ line in the entrypoint, but it’s not available in the window. Like, no window.$ Even though “window.jQuery” is specified in ProvidePlugin.

I suspect I am doing something wrong somewhere, but for now this seems to work.

same issue 😦 @tarponjargon had any progress?

This is a great example for the kind of issues that create huge frustration and bad reputation for webpack, like: “webpack is to complicate for migrating my projects to it”

Just add in your entry file: window.$ = window.jQuery = require(‘jquery’);

@cgountanis , not sure if this can help, but this is relevant section in my webpack config:

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

and i installed jQuery whilst in my repo folder with:

npm install jquery 

How did you install jQuery?