Webpack won't start - mode not found?

Question

webpack

trying to run the bundler in any of the modes shows the same message

webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const webpack = require("webpack");

module.exports = {
mode: "development",
entry: "./src/index.js",
output: {
path: __dirname + "/dist",
filename: "[name].js",
},
module: {
rules: [
{
test: /\.scss$/i,
// use: ["style-loader", "css-loader"],
use: [
mode === "
"css-loader",
"sass-loader",
],
},
],
},
plugins: [
new MiniCssExtractPlugin({
filename: "style.css",
}),
new HtmlWebpackPlugin({
filename: "main.html",
template: "./src/index.html",
}),
],
};

"devDependencies": {
"css-loader": "^6.7.1",
"html-webpack-plugin": "^5.5.0",
"mini-css-extract-plugin": "^2.6.0",
"sass-loader": "^12.6.0",
"style-loader": "^3.
"webpack-cli": "^4.9.2",
"webpack-dev-server": "^4.7.4"
}

"scripts": {
"start": "webpack serve --open ",
"server": " webpack-dev-server",
"build": "webpack --mode=production"
},

error itself ->
[webpack-cli] Failed to load '/Users/Desktop/try/36/webpack.config.js' config
[webpack-cli] ReferenceError: mode is not defined

or throws this
[webpack-cli] For using 'serve' command you need to install: 'webpack-dev-server' package.
[webpack-cli] Would you like to install 'webpack-dev-server' package? (That will run'

Answer 1

mode === "development" ? "style-loader" : MiniCssExtractPlugin.loader,

on this line you access the mode variable, which is not declared anywhere