You forgot to add 'mini-css-extract-plugin' plugin - css

Question

I'm using mini-css-extract-plugin in my webpack, version 1.3.6 but when trying to run dev build getting the below error. css and scss both are in the app.
ERROR in ./src/index.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. { plugins: [new MiniCssExtractPlugin()] }), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-
webpack.config.js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = ({ mode } = { mode: "production" }) => {
console.log(`mode is: ${mode}`);
return {
mode,
entry: "./src/index.tsx",
output: {
publicPath: "/",
path: path.resolve(__dirname, "build"),
filename: "bundle.js",
},
resolve: {
extensions: [".js", ".jsx", ".css", ".scss", ".ts", ".tsx"],
},
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg)$/i,
use: [
{
loader: "image-webpack-loader",
},
"url-loader?limit=100000",
],
// type: 'asset/inline'
},
{
test: /\.(css)$/,
use: [
MiniCssExtractPlugin.loader,
{
loader: "css-loader",
},
],
},
{
test: /\.(sass|scss)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name].css",
outputPath: "css",
esModule: false,
},
},
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: { auto: true },
},
},
{
loader: "sass-loader",
options: {
webpackImporter: true,
},
},
],
},
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
loader: "babel-loader",
},
{
test: /\.(ts|tsx)$/,
use: [
{
loader: "ts-loader",
options: {
transpileOnly: true,
},
},
],
exclude: /node_modules/,
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "./public/index.html",
favicon: "./public/favicon.ico",
}),
new MiniCssExtractPlugin({
linkType: "text/css",
}),
],
devServer: {
open: true,
},
};
};
package.json
"devDependencies": {
"#babel/core": "^7.17.5",
"#babel/preset-env": "^7.16.11",
"#babel/preset-react": "^7.16.7",
"babel": "^6.23.0",
"babel-loader": "^8.1.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
"css-loader": "^5.2.7",
"extract-loader": "^5.1.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.0.0",
"image-webpack-loader": "^8.1.0",
"mini-css-extract-plugin": "^1.3.6",
"node-sass": "6.0.1",
"postcss-loader": "^6.2.1",
"sass-loader": "^10.1.1",
"style-loader": "^2.0.0",
"ts-loader": "^8.2.0",
"url-loader": "^4.1.1",
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^3.11.1"
}