Uncaught TypeError: не удается прочитать свойство «locals» неопределенного

Я сделал 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 выглядит следующим образом:

Источник

Index.js:

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

Индекс.scss:

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

Я получаю эту ошибку в консоли:

Консоль

Бандл.js

Все остальное работает нормально, у меня нет проблем с javascript, но меня беспокоит, что я не знаю, как исправить эту ошибку.

PS: Я новичок в веб-разработке в целом, вчера начал использовать webpack, идея заключалась в том, чтобы использовать только bundle.js и bundle.css в моем html без добавления тегов jquery и bootstrap для них отдельно

JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Руководство ChatGPT по продаже мини JS-файлов
Руководство ChatGPT по продаже мини JS-файлов
JS-файл - это файл, содержащий код JavaScript. JavaScript - это язык программирования, который в основном используется для добавления интерактивности...
6
0
6 220
3
Перейти к ответу Данный вопрос помечен как решенный

Ответы 3

Ответ принят как подходящий

Попробуйте установить для параметра esModule значение false для MiniCssExtractPlugin.

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

Может кто-нибудь объяснить, в чем причина ошибки и почему esModule: false помогло?

sen77 01.12.2021 04:18

Не могли бы вы объяснить, зачем нужна такая настройка? @Dina

Dolphin 04.03.2022 16:24

Не используйте '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

Подобно ответу @Dina, но без MiniCssExtractPlugin :

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

Другие вопросы по теме