Webpack live reload says "nothing changed" even if I modify a file. Why? - reactjs

Question

I have a react project and I'm using Webpack (webpack-dev-server) for my development.
Everything compiles well, and when I make a change in my file (for the first time), the live reloading works well.
BUT, after changing the same file twice (or more), the live reloading stop working. In the console it says "nothing changed" even when I made a change.
Looks like the webpack-dev-server memory doesn't pick up the change. Any idea why?
Webpack Config
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ProvidePlugin } = require("webpack");
module.exports = {
target: "web",
mode: "development",
entry: ["regenerator-runtime/runtime.js", "./src/index.js"],
devtool: "inline-source-map",
devServer: {
historyApiFallback: true,
hot: true,
port: 8080,
static: "./dist",
watchFiles: "src/**/*,js",
},
output: {
path: path.resolve(__dirname, "dist"),
filename: "index_bundle.js",
},
resolve: { extensions: ["*", ".js", ".jsx"] },
module: {
rules: [
{
test: /\.(jsx|js)$/,
exclude: /(node_modules)/,
use: [
{
loader: "babel-loader",
options: {
presets: ["#babel/env", "#babel/react"],
},
},
],
},
{
test: /\.css$/,
// exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
{
test: /\.svg$/,
use: [
{
loader: "svg-url-loader",
options: {
limit: 10000,
},
},
],
},
],
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
title: "Development",
}),
new ProvidePlugin({
React: "react",
}),
],
};
Package.json
{
"name": "timerfrontend",
"version": "1.0.0",
"main": "index.js",
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react"
]
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack serve",
"create": "webpack -w",
"build": "webpack -p"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.16.5",
"#babel/preset-env": "^7.16.5",
"#babel/preset-react": "^7.16.5",
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"html-webpack-plugin": "^5.3.1",
"style-loader": "^3.3.1",
"webpack": "^5.65.0",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.6.0"
},
"dependencies": {
"#apollo/client": "^3.5.6",
"#apollo/link-context": "^2.0.0-beta.3",
"#apollo/react-hooks": "^4.0.0",
"#auth0/auth0-react": "^1.8.0",
"apollo-cache-inmemory": "^1.6.6",
"apollo-client": "^2.6.10",
"apollo-link-http": "^1.5.17",
"bootstrap": "^5.0.1",
"dayjs": "^1.10.5",
"npm-force-resolutions": "^0.0.10",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.1.1",
"regenerator-runtime": "^0.13.9",
"svg-url-loader": "^7.1.1"
},
"description": "",
"resolutions": {
"react": "17.0.2",
"graphql": "16.1.0"
}
}

Answer 1

I found the solution (hint: its weird)
I realized that my Webpack live reloading was working on my other components (except the I had issue with).
I finally resolved to deleting that component and create a new one (exact copy) and then it worked perfectly!?
I still don't know why Webpack didn't like this component specifically...

Answer 2

It was happening to me, I checked the files and class names, they have to be exactly the same, including caps and lowercase letters

Answer 3

In my case, the file I was modified is not being use anywhere in project, so webpack does not recognize it.
After import and use it in the code, then it work fine