Monday, June 3, 2024
Homepage · css
 Popular · Latest · Hot · Upcoming
178
rated 0 times [  179] [ 1]  / answers: 1 / hits: 64837  / 4 Years ago, sat, august 22, 2020, 12:00:00

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-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:309:15)    at addStyle (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:424:13)

    at modulesToDom (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:297:18)      

    at module.exports.module.exports (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:455:25)

    at Object.<anonymous> (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:206:14)    at __webpack_require__ (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:21:30)    at D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:85:18

    at Object.<anonymous> (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesnormalize.cssnormalize.css:88:10) 

    at Module._compile (D:ReactJs-ProjectsExpensify-appnode_modulesv8-compile-cachev8-compile-cache.js:194:30)

    at evalModuleCode (D:ReactJs-ProjectsExpensify-appnode_modulesmini-css-extract-plugindistloader.js:61:10)

    at D:ReactJs-ProjectsExpensify-appnode_modulesmini-css-extract-plugindistloader.js:166:21

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:343:11

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:681:15

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)

    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:678:31

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1423:35

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1414:32

    at eval (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:11:1)

    at D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistindex.js:321:9

    at TaskRunner.run (D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistTaskRunner.js:48:7)

    at TerserPlugin.optimizeFn (D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistindex.js:227:18)

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1409:36

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1405:32

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at Compilation.seal (D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1342:27)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.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-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:309:15)

    at addStyle (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:424:13)  

    at modulesToDom (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:297:18)

    at module.exports.module.exports (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:455:25)

    at Object.<anonymous> (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:206:14)

    at __webpack_require__ (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:21:30)

    at D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:85:18

    at Object.<anonymous> (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appnode_modulesreact-dateslibcss_datepicker.css:88:10)

    at Module._compile (D:ReactJs-ProjectsExpensify-appnode_modulesv8-compile-cachev8-compile-cache.js:194:30)

    at evalModuleCode (D:ReactJs-ProjectsExpensify-appnode_modulesmini-css-extract-plugindistloader.js:61:10)

    at D:ReactJs-ProjectsExpensify-appnode_modulesmini-css-extract-plugindistloader.js:166:21

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:343:11

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:681:15

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)

    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:678:31

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1423:35

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1414:32

    at eval (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:11:1)

    at D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistindex.js:321:9

    at TaskRunner.run (D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistTaskRunner.js:48:7)

    at TerserPlugin.optimizeFn (D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistindex.js:227:18)

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1409:36

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1405:32

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at Compilation.seal (D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1342:27)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.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-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:309:15)

    at addStyle (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:424:13)

    at modulesToDom (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:297:18)

    at module.exports.module.exports (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:455:25)       

    at Object.<anonymous> (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:206:14)

    at __webpack_require__ (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:21:30)

    at D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:85:18

    at Object.<anonymous> (D:ReactJs-ProjectsExpensify-appnode_modulesstyle-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulescss-loaderdistcjs.js!D:ReactJs-ProjectsExpensify-appnode_modulessass-loaderlibloader.js!D:ReactJs-ProjectsExpensify-appsrcstylesstyles.scss:88:10)

    at Module._compile (D:ReactJs-ProjectsExpensify-appnode_modulesv8-compile-cachev8-compile-cache.js:194:30)

    at evalModuleCode (D:ReactJs-ProjectsExpensify-appnode_modulesmini-css-extract-plugindistloader.js:61:10)

    at D:ReactJs-ProjectsExpensify-appnode_modulesmini-css-extract-plugindistloader.js:166:21

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:343:11

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:681:15

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:15:1)

    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.js:678:31

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1423:35

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1414:32

    at eval (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:11:1)

    at D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistindex.js:321:9

    at TaskRunner.run (D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistTaskRunner.js:48:7)

    at TerserPlugin.optimizeFn (D:ReactJs-ProjectsExpensify-appnode_modulesterser-webpack-plugindistindex.js:227:18)

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:7:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1409:36

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1405:32

    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHookCodeFactory.js:33:10), <anonymous>:6:1)    at AsyncSeriesHook.lazyCompileHook (D:ReactJs-ProjectsExpensify-appnode_modulestapablelibHook.js:154:20)

    at Compilation.seal (D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompilation.js:1342:27)

    at D:ReactJs-ProjectsExpensify-appnode_moduleswebpacklibCompiler.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"

    }

}

More From » css
 Answers
14

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


[#50700] Tuesday, August 11, 2020, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
jeffery
Add To Favorites
Follow
Total Points: 180
Total Questions: 114
Total Answers: 117
Location: Chad
Member since Mon, Dec 5, 2022
2 Years ago
;