Skip to content
Advertisement

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

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 :

JavaScript

webpack.config.js :

JavaScript

package.json :

JavaScript

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

Advertisement