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

Robert · Accepted Answer · 2021-04-01 12:06:11Z

2

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.

answered Apr 1, 2021 at 12:06

Robert

2,5431 gold badge28 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicolas Van Damme Over a year ago

I forgot to add that I had already tried this, that's my bad. Unfortunately, it doesn't change any of the errors after building the bundle and running the application. It definitely must be a step in the right direction, so I'll keep it in there.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related