未捕获的类型错误：无法读取未定义的属性“本地”答案

【问题标题】：Uncaught TypeError: Cannot read property 'locals' of undefined未捕获的类型错误：无法读取未定义的属性“本地”
【发布时间】：2025-11-30 04:10:01
【问题描述】：

我已经制作了 bundle.js 和 bundle.css 以在我的网络应用程序中使用，

我的 package.json 看起来像这样：

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

我的 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'
            })
        ]

    };
};

我的src结构是这样的：

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';

我在控制台中收到此错误：

Console

bundle.js

其他一切正常，我对 javascript 没有任何问题，但我不知道如何解决这个错误。

PS：我是 web 开发的新手，昨天开始使用 webpack，我的想法是在我的 html 中只使用 bundle.js 和 bundle.css，而不分别为它们添加 jquery 和 bootstrap 标签

【问题讨论】：

标签： javascript .net webpack bundle asp.net-core-3.1

【解决方案1】：

尝试将 MiniCssExtractPlugin 的选项 esModule 设置为 false

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

【讨论】：

有人能解释错误的原因是什么以及为什么esModule: false 有帮助吗？
你能解释一下为什么需要这样调整吗？@Dina

【解决方案2】：

不要将 'style-loader' 与 mini-css-extract-plugin 一起使用，修改您的规则以匹配以下内容：

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

您可以在此处找到更多详细信息：https://github.com/webpack-contrib/mini-css-extract-plugin/issues/613

【讨论】：