Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined

Question

Ok, So basically We use webpack to bundle our resources before deployment. However, now we want to also bundle our sass files through webpack is it simplifies our build process.it was going well, but now bundle.js is too big to deploy on production so I wanted to split bundle.js and styling files. I don't much know about plugins and all ,so I searched a little bit and found that mini-css-extract-plugin lets me split style files into a new file. So I went and tweaked the web-pack.config file according to the docs of mini-css-extract-plugin but I am getting so many errors. Can somebody guide me to split styles file and extract it from bundle.js?

error :

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

I wonder if there is a conflict between all your CSS loaders. First thing I would try is removing style-loader. — Camilo
– Camilo, Commented Aug 22, 2020 at 22:59
According to the documentation you should not use style-loader and mini-css-extract-plugin together: github.com/webpack-contrib/mini-css-extract-plugin#recommended — Clarice Bouwer
– Clarice Bouwer, Commented Mar 24, 2022 at 0:18

Andrew · Accepted Answer · 2022-10-19 08:20:40Z

42

As Camilo suggested there was this "style-loader" which was somehow conflicting to the plugin but anyway as I am separating CSS files I don't need inline CSS so I completely removed it from the loader and the error was completely gone and it gave me a new build with separate CSS file

Anyone, having the same problem in future just look for your loader whether its conflicting

edited Oct 19, 2022 at 8:20

Andrew

49.8k15 gold badges99 silver badges145 bronze badges

answered Aug 23, 2020 at 6:04

Viral Thaker

9421 gold badge7 silver badges10 bronze badges

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

4 Comments

Michael Over a year ago

how can we know if is conflucting

tjbp Over a year ago

The critical info here is style-loader is used to insert all your CSS into the DOM via JS, whereas the loader in MiniCssExtractPlugin.loader is designed to add a link element in your head element to the separately built CSS file. They are fundamentally incompatible and therefore you should remove one.

huypham Over a year ago

Problem appears when I try to use both loader css-loader and style-loader. I have removed the style-loader, and everything is fine :)

Mauricio Gracia Gutierrez Over a year ago

In my case after migrating from Angular 7 to Angular 13, I ended up with two different versions of css-loader in my package-lock.json. I remove the older one and problem was solved

KARTHIKEYAN.A · Accepted Answer · 2022-03-22 12:50:01Z

5

Due to style-loader the error will happen, after removing this it gone.

Error:

    rules:[{
        test:/\.(css)$/,
        use:[MiniCssExtractPlugin.loader,'style-loader','css-loader']
    },]

Solution:

    rules:[{
        test:/\.(css)$/,
        use:[MiniCssExtractPlugin.loader,'css-loader']
    },]

answered Mar 22, 2022 at 12:50

KARTHIKEYAN.A

20.5k11 gold badges139 silver badges151 bronze badges

Comments

Mohamed Osman · Accepted Answer · 2021-08-14 08:03:26Z

0

just replace the following in webpack.mix.js

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

to

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

answered Aug 14, 2021 at 8:03

Mohamed Osman

92 bronze badges

Comments

CyberMessiah · Accepted Answer · 2022-01-21 19:22:53Z

0

I had exactly the same error on Gatsby when I tried to add fonts under src folder. The reason for the alert originated in my improper path for importing. I had appended ".." to the path inside the main CSS file, which was redundant - it was reading from the public folder. So, I believe going over the paths on imports may indicate the faulty code.

answered Jan 21, 2022 at 19:22

CyberMessiah

1,29012 silver badges14 bronze badges

Collectives™ on Stack Overflow

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related