Having Troubles Setting Up Webpack in React ?

If you are following the great tutor Shaun Wassell tutorial on Linkedin on "Building Modern Projects With React" and you are having issues setting up your webpack to work correctly, you may wish to use the configuration below.Please bear in mind that the tech world is an ever evolving world, if later in the future, this solution does not work, kindly do a research and upload for the community as well. You may not need this in you day to day react project, but this will give you an indepth knowledge of

const path = require("path");
const webpack = require("webpack");

module.exports = {
entry: "./src/index.js",
mode: "development",
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /(node_modules)/,
loader: "babel-loader",
options: {
presets: ["@babel /env"],
},
},
{
test: /.css$/,
use: ["style-loader", "css-loader"],
},
],
},
resolve: {
extensions: ["*", ".js", ".jsx"],
},
output: {
path: path.resolve(dirname, "dist/"),
publicPath: "/dist/",
filename: "bundle.js",
},
devServer: {
static: {
directory: path.join(dirname, "public/"),
},
port: 3000,
devMiddleware: {
publicPath: "https://localhost:3000/dist/",
},
hot: "only",
},
};

The above configuration got my project running after I uninstalled and re-installed the css loader. Here is the command. $ npm remove css-loader && npm install --save-dev css-loader

The attached image was the initial error I was getting while running the code.

Have all the fun you can.