Webpack 5 devserver doesnt recompile on file change

Question

I'm new to Webpack configuration and having trouble setting it up and stuck on it for weeks. I've got it to compile on start but it doesn't rebuild/recompile on changes.

I've tried to preserve log in browser console and when I save changes, it displays: [webpack-dev-server] "src/components/Login.jsx" from static directory was changed. Reloading... But since the code hasnt recompiled, theres no changes on the web.

If anyone can assist please.

I'm using: NPM 6.14.17 Node v18.14.0

"webpack": "^5.47.0", "webpack-cli": "^4.7.2", "webpack-dev-server": "^4.9.3"

Script> "start": "webpack serve --env type=local"

webpack.config.js

const path = require("path");
// const moment = require('moment');
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require ("html-webpack-plugin");
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
    .BundleAnalyzerPlugin;

let mode = "development";
let target = "web";

if (process.env.NODE_ENV === "production") {
    mode = "production";
    target = "browserslist";
}

const port = process.env.PORT || 3000;

module.exports = (env) => {
    console.log("Passing env", env);
    console.log("Target", target);
    return {
        mode,
        stats: "normal",
        optimization: {
            usedExports: true, //providedExports enabled by default (only used exports are generated for each module)
        },
        target,
        entry: './src/index.js',
        output: {
            filename: 'bundle.[fullhash].js',
            path: path.resolve(__dirname, "dist"),
            assetModuleFilename: "images/[hash][ext][query]",
            publicPath: '/',
        },

        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules/,
                    use: {
                        loader: "babel-loader",
                    }
                },
                {
                    test: /\.(png|jpe?g|gif|svg)$/i,
                    type: "asset",
                    // loader: 'file-loader',
                    
                    // type: "asset/resource",
                    // type: "asset/inline",
                    // parser: {
                    //     dataUrlCondition: {
                    //         maxSize: 8 * 1024,
                    //     }
                    // }
                },
                // {
                //     test: /\.(s[ac]|c)ss$/i,
                //     use: [
                //         {
                //             loader: MiniCssExtractPlugin.loader,
                //             options: { publicPath: "" }
                //         },
                //         "css-loader", 
                //         "postcss-loader", 
                //         "sass-loader"
                //     ]
                // },
                {
                    test: /\.css/,
                    use: [
                        "style-loader",
                        "css-loader",
                    ],
                },
                {
                    test: /\.(sass|scss)$/,
                    use: [{
                        loader: 'style-loader', // creates style nodes from JS strings
                        // options: { minimize: env.type == 'live' },
                    }, {
                        loader: 'css-loader', // translates CSS into CommonJS
                        // options: { minimize: env.type === 'live' },
                    }, {
                        loader: 'sass-loader', // compiles Sass to CSS
                        // options: { minimize: env.type === 'live' },
                    }],
                },
            ]
        },

        plugins: [
            // new CleanWebpackPlugin(),
            // new MiniCssExtractPlugin(),
            new HtmlWebpackPlugin({
                template: "./src/index.html",
                // favicon: 'public/favicon.ico',
            }),
            new BundleAnalyzerPlugin({
                analyzerMode: process.env.STATS || "disabled"
            }),
        ],

        resolve: {
            extensions: [".js", ".jsx"],
        },

        devtool: 'source-map',

        devServer: {
            host: 'localhost',
            port: port,
            liveReload: true,
            watchFiles: {
                paths: ['src/**/*.jsx', 'public/**/*'],
                options: {
                  usePolling: true,
                },
              },
            static: [
                // Simple example
                path.resolve(__dirname, 'static'),
                // Complex example
                {
                  directory: path.resolve(__dirname, 'static'),
                  staticOptions: {},
                  // Don't be confused with `dev.publicPath`, it is `publicPath` for static directory
                  // Can be:
                  // publicPath: ['/static-public-path-one/', '/static-public-path-two/'],
                  publicPath: '/static-public-path/',
                  // Can be:
                  // serveIndex: {} (options for the `serveIndex` option you can find https://github.com/expressjs/serve-index)
                  serveIndex: true,
                  // Can be:
                  // watch: {} (options for the `watch` option you can find https://github.com/paulmillr/chokidar)
                  watch: true,
                },
              ],
            hot: true,
            historyApiFallback: true,
        }
    }
}

I've tried looking online for answers and trying different settings but haven't had much luck.

Also tried setting Hot to false but didnt work