'jquery is not defined' when using webpack to load bootstrap

Question

I am just starting to learn to use Webpack (previously I just use the manual way to include individual scripts separately). And I used bootstrap-loader for load

Answer 1

Plugin is not needed. Just use following as entry:

entry: [
    'jquery', //will load jquery from node_modules
    './assets/js/index',
]

Then in ES6+ file use:

import $ from "jquery";

Answer 2

I want to share my findings for any future developer who might have the same use-case I do.

I had the requirement to only create a vendor bundle and not an app bundle for an AngularJS (1.7.2) app, using Webpack 4 (4.16.4). I think because I was only creating a vendor bundle, none of the other solutions worked. Only expose-loader worked for me, like so:

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

For more information: https://github.com/webpack-contrib/expose-loader

Answer 3

Add this as plugin

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

and you should be able to have jquery in your whole project.

If issue persists after adding the plugin, try restarting your nodejs server. Remember to install jquery using npm install --save jquery.

Answer 4

I know this is a bit old, but I managed to do it like that :

global.jQuery = require('jquery'); require('bootstrap');