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