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

Question

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

pfftdammitchris opened this issue 8 years ago · 39 comments

pfftdammitchris commented 8 years ago

Do you want to request a feature or report a bug?

What is the current behavior?

If the current behavior is a bug, please provide the steps to reproduce.

What is the expected behavior?

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.

Hey guys I tried everything and I am ready to burst out in shame and I am tired of getting this same error over and over for the past 4 hours. I'm just going to copy and paste the console so we can see how bad it is:

    Uncaught Error: Bootstrap's JavaScript requires jQuery
        at bootstrap.min.js:6
    (anonymous) @ bootstrap.min.js:6
    etw.js:4 Fri Feb 10 2017
    etw.js:125 Uncaught ReferenceError: $ is not defined
        at LFDTrack (etw.js:125)
        at Object.LFD_Search (etw.js:244)
        at User.lfd_search (etw.js:25)
        at etw.js:250
    LFDTrack @ etw.js:125
    LFD_Search @ etw.js:244
    User.lfd_search @ etw.js:25
    (anonymous) @ etw.js:250
    jBox.min.js:2 Uncaught ReferenceError: jQuery is not defined
        at jBox.min.js:2
    (anonymous) @ jBox.min.js:2
    jquery.datetimepicker.full.min.js:1Uncaught ReferenceError: jQuery is not defined
        at jquery.datetimepicker.full.min.js:1
        at jquery.datetimepicker.full.min.js:1
    (anonymous) @ jquery.datetimepicker.full.min.js:1
    (anonymous) @ jquery.datetimepicker.full.min.js:1
    owl.carousel.js:1517 Uncaught ReferenceError: jQuery is not defined
        at owl.carousel.js:1517
    (anonymous) @ owl.carousel.js:1517
    (index):539 Uncaught ReferenceError: $ is not defined
        at (index):539
    (anonymous) @ (index):539
    featherlight.min.js:8 Uncaught ReferenceError: jQuery is not defined
        at featherlight.min.js:8
    (anonymous) @ featherlight.min.js:8
    jquery.datetimepicker.full.min.js:1 Uncaught ReferenceError: jQuery is not defined
        at jquery.datetimepicker.full.min.js:1
        at jquery.datetimepicker.full.min.js:1
    (anonymous) @ jquery.datetimepicker.full.min.js:1
    (anonymous) @ jquery.datetimepicker.full.min.js:1
    pagecrossfade-min.js:1 Uncaught ReferenceError: jQuery is not defined
        at pagecrossfade-min.js:1

Here is my main.js file, the entry:

    "use strict";
    
    import $ from 'jquery';
    import jQuery from 'jquery';
    window.$ = jQuery;
    import moment from 'moment';
    import _ from 'lodash';
    import math from 'mathjs';
    //import jBox from 'jbox';

And here is my webpack.config.js
I tried switchign everything around. a.k.a taking out the loaders part and leaving the plugins part there, or taking out the imports in the main.js and leaving only the stuff in the webpack.config.js for jquery, etc. Nothing works. I feel like I am the only person in the web who still has this error because everyone else has gotten it fixed so I have no where to look on google search anymore.(p.s. 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)

    const path = require('path');
    const webpack = require('webpack');

    module.exports = {
        entry: './main.js',
        output: { path: __dirname, filename: 'bundle.js' },
        watch: true,
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery"
            })
        ],
        module: {
            loaders: [
                {
                    test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
                    loader: "imports?this=>window"
                },
                {
                    test: /[\/\\]node_modules[\/\\]some-module[\/\\]index\.js$/,
                    loader: "imports?define=>false"
                }
        ]
        }
    }

Answer 1 · 2017-02-11T06:39:45.000Z

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 😛

Answer 2 · 2017-02-11T06:55:46.000Z

edit: still Doesn't work even when I re-edited to fit that criteria and added in the externals part

Answer 3 · 2017-02-11T07:13:37.000Z

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.

Answer 4 · 2017-02-11T10:01:57.000Z

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'
...

$()...

Answer 5 · 2017-10-29T06:11:26.000Z

Just use like this

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

or add to webpack

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

Answer 6 · 2017-11-27T00:21:36.000Z

anyone finding this that is having this issue while using angular cli this worked for me.
Step 1)
Import JQuery one time, across the project .
○ Open .angular-cli.json
○ Replace or add the jquery script to the scripts section with the following.
"scripts": [ "../node_modules/jquery/dist/jquery.js"],
Step 2)
Add declaration in the typings file
Open typings.d.ts
• Declare jQuery
declare var jQuery: any;

Answer 7 · 2018-01-17T08:37:36.000Z

@ptflp 's solution works for me..

Answer 8 · 2018-02-01T17:47:24.000Z

So does bootstrap not allow you to include scripts the old way anymore with regular script tags?

Answer 9 · 2018-02-21T09:13:16.000Z

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?)

Answer 10 · 2018-03-14T16:09:13.000Z

I came here to ask what @paulcalabro is asking. This is confusing for a newbie to webpack.

Answer 11 · 2018-03-19T19:11:01.000Z

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

Answer 12 · 2018-05-29T08:54:44.000Z

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

Answer 13 · 2018-05-31T23:54:46.000Z

@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;
}

Answer 14 · 2018-06-29T17:04:50.000Z

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

alone is not working.

Answer 15 · 2018-06-30T05:24:42.000Z

@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?

Answer 16 · 2018-07-02T14:18:47.000Z

Same way but in order to use jquery directly and not get the $ not found error I have to use

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

which is confusing that I have to edit index.js/app.js and the webpack config.

Answer 17 · 2018-07-02T20:24:21.000Z

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.

Answer 18 · 2018-07-27T22:04:36.000Z

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.$ = $;

Answer 19 · 2019-04-02T17:07:16.000Z

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

Answer 20 · 2019-04-02T17:09:49.000Z

Anyone knows a solution?

Im using yarn add jquery
3.1.1 latest as of now

Answer 21 · 2019-04-22T02:15:33.000Z

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.

Answer 22 · 2019-06-13T13:36:02.000Z

Just add declare var $: any; to the beginning of your component ts file.
For example,

import { Component, OnInit } from '@angular/core';
declare var $: any;

@component({
selector: 'app-header',
templateUrl: './header.component.html',
styleUrls: ['./header.component.scss']
})
export class HeaderComponent implements OnInit {
...
}

Answer 23 · 2019-06-18T02:28:12.000Z

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

Answer 24 · 2019-07-04T10:13:29.000Z

Thank you @sufius! I've been pulling my hair out trying to get Webpack 4 to play nice with JQuery...your answer did the trick!

Answer 25 · 2019-07-10T12:54:41.000Z

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

Answer 26 · 2019-07-19T15:37:22.000Z

Let me add to the chaos here...

In my webpack config

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

That alone did not work.

So I tried putting this in my entry:

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

That ALSO didn't work.

So I removed the ProvidePlugin. Still no love.

I tried putting this in my config:

alias: {
  'jquery': path.join(__dirname, '/node_modules/jquery/dist/jquery.min.js')
}

with and without the other bits of config/import statements.

I am not using eslint (yet), so I can't try @sufius's fix.

Any other ideas? How is this still so hard?

Answer 27 · 2019-07-19T18:57:50.000Z

@igreulich - not sure if this will help, but I put my config in a gist.

as the description states:

“just the config i use, I’m sure it could be better but it’s worked for me for a while”

https://gist.github.com/oshihirii/3facf1112ce14bc1e0a484f4f8ccd1e8

and that assumes you have installed jquery with npm.

Answer 28 · 2019-09-20T18:34:55.000Z

global.$ = require("jquery")

Answer 29 · 2019-11-19T15:43:50.000Z

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

Answer 30 · 2020-01-06T16:21:52.000Z

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

Worked for me,TY dude.

Answer 31 · 2020-04-26T17:04:35.000Z

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.

Answer 32 · 2020-05-28T19:38:31.000Z

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"

Answer 33 · 2020-05-28T20:01:10.000Z

@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.

Answer 34 · 2020-06-18T06:55:29.000Z

Hi I had the same problem. I did everything that this post suggested but still got the error. Anyway I solved my problem and I'm suspecting many might actually have the same problem. Just check your index.html file in the network tab, make sure that you have the <script src="path to jquery"> included. In my case I have many webpack files for dev, staging and prod. I just forgot to add jquery it to my prod file and forgot to disabled cache in the browser.

Answer 35 · 2020-10-01T05:52:23.000Z

global.$ = require("jquery");
Didn't work for me any other suggestions?

Answer 36 · 2020-10-01T15:57:22.000Z

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.$;

Answer 37 · 2021-02-05T22:23:01.000Z

yes adding:

global.$ = require("jquery"); in entry point "file" worked!

Answer 38 · 2021-03-11T15:24:34.000Z

Got this working by including the expose-loader npm package and adding the following to my webpack.config under module -> rules:

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

Answer 39 · 2021-03-17T08:57:41.000Z

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.