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"
}
}
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');
Try the cli command below
npm-install
it has worked for me.
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.
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']
},]
Ok, nevermind as Camilo suggested there was this "stye-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
I had such an issue with my angular based project, I have did the following steps and it is fixed: