Webpack 5 devserver doesnt recompile on file change - reactjs

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