Uncaught TypeError: Cannot read property 'locals' of undefined

Question

I've made bundle.js and bundle.css to use in my web app,

My package.json looks like this:

  "dependencies": {
    "bootstrap": "^4.5.3",
    "jquery": "^3.5.1",
    "popper.js": "^1.16.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
    "@babel/preset-env": "^7.12.11",
    "babel-loader": "^8.2.2",
    "css-loader": "^5.0.1",
    "file-loader": "^6.2.0",
    "mini-css-extract-plugin": "^1.3.3",
    "node-sass": "^5.0.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "url-loader": "^4.1.1",
    "webpack": "^5.11.0",
    "webpack-cli": "^4.2.0"
  },

My webpack.config.js:

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

module.exports = (env, argv) => {
    return {
        //Define entry point
        entry: ['./src/index.js', './src/css/index.scss'],

        //Define output point
        output: {
            path: path.resolve(__dirname, 'wwwroot/dist'),
            filename: 'bundle.js'
        },

        module: {
            rules: [
                {
                    test: /\.s[c|a]ss$/,
                    include: path.resolve(__dirname, 'src'),
                    use: [
                        'style-loader',
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.js$/,
                    include: path.resolve(__dirname, 'src'),
                    loader: 'babel-loader',
                    options: {
                        presets: ["@babel/preset-env"],
                        plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                },
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
            new MiniCssExtractPlugin({
                filename: 'bundle.css'
            })
        ]

    };
};

My src structure is like this:

src

index.js:

import 'jquery';
import 'bootstrap';
import './js/login';
import './js/helpers';

index.scss:

@import 'bootstrap';
@import 'util.scss';
@import 'login.scss';
@import 'site.css';

I am getting this error in console:

Console

bundle.js

Everything else is working fine, i have no problem with javascript, but it bugs me that i don't know how to fix this error.

PS: I am new to web development in general, started using webpack yesterday, the idea was to use only bundle.js and bundle.css in my html without adding jquery and bootstrap tags for them separately

Rockbottom

Answer 1

Try to set the option esModule to false for MiniCssExtractPlugin

use: [
    'style-loader',
    {
        loader: MiniCssExtractPlugin.loader,
        options: {
            esModule: false,
        },
    },
    'css-loader',
    'sass-loader'
]

Precursor

Can somebody explain what was the cause of the error and why esModule: false helped? – Firewater

could you explain why need tweak like this?@Precursor – Wester

Answer 2

Don't use 'style-loader' along with mini-css-extract-plugin, modify your rule to match the below:

{
    test: /\.s[c|a]ss$/,
    include: path.resolve(__dirname, 'src'),
    use: [
            //'style-loader',
            MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader'
         ]
},

You can find more details here: https://github.com/webpack-contrib/mini-css-extract-plugin/issues/613

Bituminize

Answer 3

Similar to @Dina's answer but without MiniCssExtractPlugin :

use: [
    {
      loader: "style-loader",
      options: {
        esModule: false,
      },
    },
    "css-loader",
    "sass-loader",
  ]

Sanity