jQuery and $ not defined in ASP.NET Core project using webpack

Question

I'm developing an ASP.NET Core project, and recently switched out the default bootstrap and jQuery libraries for the npm packages to be able to theme bootstrap. I noticed, however, that jQuery doesn't seem to load in properly, or at all; with errors like $ is not defined and jQuery is not defined .

I tried fixing updating webpack to v5 from v4, and use dependOn on the entries, but that also did not fix the issue. I feel like the load order is to blame here, but everything I've tried didn't work. When looking at the bundled files, jQuery is always last to be loaded.

webpack.config.js:

const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const bundleFileName = 'bundle';
const dirName = 'wwwroot/dist';

module.exports = (env, argv) => {
    return {
        mode: argv.mode === "production" ? "production" : "development",
        entry: ['./node_modules/jquery/dist/jquery.js', './node_modules/bootstrap/dist/js/bootstrap.bundle.js', './wwwroot/js/site.js', './wwwroot/scss/site.scss', './node_modules/jquery-validation/dist/jquery.validate.js', './node_modules/jquery-validation-unobtrusive/dist/jquery.validate.unobtrusive.js'],
        output: {
            filename: bundleFileName + '.js',
            path: path.resolve(__dirname, dirName)
        },
        module: {
            rules: [
                {
                    parser: {
                        amd: false,
                    },
                    test: /\.s[c|a]ss$/,
                    use:
                        [
                            'style-loader',
                            MiniCssExtractPlugin.loader,
                            'css-loader',
                            {
                                loader: 'postcss-loader', // Run postcss actions
                                options: {
                                    postcssOptions: {
                                        plugins: function () { // postcss plugins, can be exported to postcss.config.js
                                            
                                            let plugins = [require('autoprefixer')];
                                            
                                            if(argv.mode === "production") {
                                                
                                                plugins.push(require('cssnano'));
                                            }
                                            
                                            return plugins;
                                        }
                                    }
                                }
                            },
                            'sass-loader'
                        ]
                }
            ]
        },
        plugins: [
            new CleanWebpackPlugin(),
            new MiniCssExtractPlugin({
                filename: bundleFileName + '.css'
            })
        ]
    };
};

package.json:

{
  "name": "proj2aalst-g3",
  "version": "1.0.0",
  "scripts": {
    "build": "webpack --progress --profile",
    "production": "webpack --progress --profile --mode production"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "autoprefixer": "^10.0.1",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^4.3.0",
    "cssnano": "^4.1.10",
    "file-loader": "^6.1.0",
    "mini-css-extract-plugin": "^0.11.2",
    "node-sass": "^4.14.1",
    "postcss-loader": "^4.0.2",
    "sass-loader": "^10.0.2",
    "style-loader": "^1.2.1",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
  },
  "dependencies": {
    "@popperjs/core": "^2.9.1",
    "bootstrap": "5.0.0-beta2",
    "jquery": "3.6.0",
    "jquery-validation": "^1.19.3",
    "jquery-validation-unobtrusive": "^3.2.12",
    "postcss": "^8.2.9"
  }
}

Answer 1

You have to add the jQuery to the plugins like so:

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

This means, if webpack encounters $ or jQuery it will inject the plugin.