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

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

Author: Fantashit

15 thoughts on “Webpack gives $ is not defined or jQuery is not defined error in console

  1. 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 😛

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

  3. 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'
    ...
    
    $()...
  4. Just use like this

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

    or add to webpack

    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery'
    })
  5. 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?)

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

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

  8. @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;
    }
  9. 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.$ = $;
    
  10. 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

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

Comments are closed.