模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ReferenceError：文档未定义

Posted 2023-02-22

技术标签:

【中文标题】模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ReferenceError：文档未定义【英文标题】：Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined 【发布时间】：2020-12-11 19:22:22 【问题描述】：

好的，所以基本上我们在部署之前使用 webpack 来打包我们的资源。但是，现在我们还想通过 webpack 打包我们的 sass 文件，这简化了我们的构建过程。进展顺利，但是现在 bundle.js 太大而无法部署到生产环境中，所以我想拆分 bundle.js 和样式文件。我对插件和所有东西都不太了解，所以我搜索了一下，发现 mini-css-extract-plugin 可以让我将样式文件拆分为一个新文件。所以我去根据文档调整了 web-pack.config 文件 mini-css-extract-plugin 但我遇到了很多错误。有人可以指导我拆分样式文件并从 bundle.js 中提取它吗？

错误：

ERROR in ./node_modules/normalize.css/normalize.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:309:15)    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:424:13)
    at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:297:18)      
    at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:455:25)
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:206:14)    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:21:30)    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:85:18
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\normalize.css\normalize.css:88:10) 
    at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
    at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
 @ ./src/app.js 10:0-37

ERROR in ./node_modules/react-dates/lib/css/_datepicker.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:309:15)
    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:424:13)  
    at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:297:18)
    at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:455:25)
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:206:14)
    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:21:30)
    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:85:18
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\node_modules\react-dates\lib\css\_datepicker.css:88:10)
    at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
    at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
 @ ./src/components/ExpenseForm.js 27:0-45
 @ ./src/components/AddExpensePage.js
 @ ./src/routers/AppRouter.js
 @ ./src/app.js

ERROR in ./src/styles/styles.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ReferenceError: document is not defined
    at insertStyleElement (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:309:15)
    at addStyle (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:424:13)
    at modulesToDom (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:297:18)
    at module.exports.module.exports (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:455:25)       
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:206:14)
    at __webpack_require__ (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:21:30)
    at D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:85:18
    at Object.<anonymous> (D:\ReactJs-Projects\Expensify-app\node_modules\style-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\css-loader\dist\cjs.js!D:\ReactJs-Projects\Expensify-app\node_modules\sass-loader\lib\loader.js!D:\ReactJs-Projects\Expensify-app\src\styles\styles.scss:88:10)
    at Module._compile (D:\ReactJs-Projects\Expensify-app\node_modules\v8-compile-cache\v8-compile-cache.js:194:30)
    at evalModuleCode (D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:61:10)
    at D:\ReactJs-Projects\Expensify-app\node_modules\mini-css-extract-plugin\dist\loader.js:166:21
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:343:11
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:681:15
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:678:31
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1423:35
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1414:32
    at eval (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:11:1)
    at D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:321:9
    at TaskRunner.run (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\TaskRunner.js:48:7)
    at TerserPlugin.optimizeFn (D:\ReactJs-Projects\Expensify-app\node_modules\terser-webpack-plugin\dist\index.js:227:18)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1409:36
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1405:32
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:\ReactJs-Projects\Expensify-app\node_modules\tapable\lib\Hook.js:154:20)
    at Compilation.seal (D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compilation.js:1342:27)
    at D:\ReactJs-Projects\Expensify-app\node_modules\webpack\lib\Compiler.js:675:18
 @ ./src/app.js 11:0-30

webpack.config.js：

const path = require("path");
//const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = env => 
    const isProduction = env === "production";
    //const CSSExtract = new ExtractTextPlugin("styles.css");

    console.log("env", env);
    return 
        entry: "./src/app.js",
        output: 
            path: path.join(__dirname, "public"),
            filename: "bundle.js",
        ,
        module: 
            rules: [
                
                    loader: "babel-loader",
                    test: /\.js$/,
                    exclude: /node_modules/,
                ,
                
                    test: /\.s?css$/,
                    use: [
                        
                            loader: MiniCssExtractPlugin.loader,
                            options: 
                                publicPath: path.join(__dirname, "public"),
                            ,
                        ,
                        "style-loader",
                        "css-loader", 
                        "sass-loader", 
                    ],
                ,
            ],
        ,
        plugins: [
            new MiniCssExtractPlugin(
                filename: "styles.css",
            ),
        ],
        // plugins: [CSSExtract],
        devtool: isProduction ? "source-map" : "cheap-module-eval-source-map", 

        devServer: 
            contentBase: path.join(__dirname, "public"),
            historyApiFallback: true,
        ,
    ;
;

package.json：


    "name": "expensify-app",
    "version": "1.0.0",
    "main": "index.js",
    "author": "Viral Thaker",
    "license": "MIT",
    "scripts": 
        "serve": "live-server public/",
        "build:dev": "webpack",
        "build:prod": "webpack -p --env production",
        "dev-server": "webpack-dev-server",
        "start": "npm run dev-server",
        "test": "jest"
    ,
    "dependencies": 
        "babel-cli": "^6.26.0",
        "babel-core": "^6.26.3",
        "babel-loader": "^8.1.0",
        "babel-plugin-transform-class-properties": "^6.24.1",
        "babel-plugin-transform-object-rest-spread": "^6.26.0",
        "css-loader": "^4.0.0",
        "jest": "^26.4.1",
        "live-server": "^1.2.1",
        "moment": "^2.27.0",
        "node-sass": "^4.14.1",
        "normalize.css": "^8.0.1",
        "react": "^16.13.1",
        "react-addons-shallow-compare": "^15.6.2",
        "react-dates": "^21.8.0",
        "react-dom": "^16.13.1",
        "react-modal": "^3.11.2",
        "react-redux": "^7.2.1",
        "react-router-dom": "^5.2.0",
        "redux": "^4.0.5",
        "sass-loader": "^6.0.6",
        "style-loader": "^1.2.1",
        "uuid": "^8.3.0",
        "validator": "^13.1.1"
    ,
    "devDependencies": 
        "@babel/core": "^7.10.5",
        "@babel/preset-env": "^7.10.4",
        "@babel/preset-react": "^7.10.4",
        "extract-text-webpack-plugin": "^4.0.0-beta.0",
        "mini-css-extract-plugin": "^0.10.0",
        "webpack": "^4.44.1",
        "webpack-cli": "^3.3.12",
        "webpack-dev-server": "^3.11.0"

【问题讨论】：

我想知道您所有的 CSS 加载器之间是否存在冲突。我会尝试的第一件事是删除style-loader。 【参考方案1】：

好吧，没关系，因为 Camilo 建议有这个“stye-loader”，它与插件有某种冲突，但无论如何，当我分离 CSS 文件时，我不需要内联 CSS，所以我将它从加载器和错误中完全删除完全消失了，它给了我一个带有单独 CSS 文件的新版本

各位，以后遇到同样的问题，看看你的loader有没有冲突

【讨论】：

我们如何知道是否正在发生冲突这里的关键信息是 style-loader 用于通过 JS 将所有 CSS 插入到 DOM 中，而 MiniCssExtractPlugin.loader 中的加载程序旨在在您的 head 中添加一个 link 元素元素添加到单独构建的 CSS 文件中。它们从根本上是不兼容的，因此您应该删除一个。当我尝试同时使用 loader css-loader 和 style-loader 时出现问题。我已经删除了样式加载器，一切都很好:)【参考方案2】：

只需替换 webpack.mix.js 中的以下内容

   mix.js('resources/js/app.js', 'public/js')
   .sass('resources/css/app.css', 'public/css')
   .sourceMaps();

到

    mix.js('resources/js/app.js', 'public/js')
       .sass('resources/sass/app.scss', 'public/css');

【讨论】：

【参考方案3】：

我的基于 Angular 的项目遇到了这样的问题，我已执行以下步骤并已修复：

重新安装 angular-cli 删除 node_modules 文件夹，并安装它（npm install）

【讨论】：

【参考方案4】：

试试下面的cli命令

npm-install

它对我有用。

【讨论】：

以上是关于模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：ReferenceError：文档未定义的主要内容，如果未能解决你的问题，请参考以下文章

如何修复“模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）”

错误：模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：

如何修复“模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）”

Rails Tailwind 设置：模块构建失败（来自 ./node_modules/postcss-loader/src/index.js）：

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）Vue Js

带有 babel 的 webpack 显示错误模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：