Webpack stops 'building' module on file change, after the first update (React) - reactjs

Question

I have a React application and most files are updated/built normally, upon command invocation and then with subsequent file changes. All but one file in particular, which is only built once. The initial compilation, and the FIRST file change. After that, webpack stops building this ONE file. All other files in this directory build fine.
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#stripe/react-stripe-js": "^1.6.0",
"#stripe/stripe-js": "^1.21.1",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"axios": "^0.21.1",
"bootstrap": "^5.0.0",
"bootstrap-icons": "^1.5.0",
"cypress": "^8.5.0",
"cypress-plugin-stripe-elements": "^1.0.2",
"dotenv": "^10.0.0",
"lodash": "^4.17.21",
"prop-types": "^15.7.2",
"react": "^17.0.2",
"react-alert": "^7.0.3",
"react-alert-template-basic": "^1.0.2",
"react-bootstrap": "^1.6.4",
"react-dom": "^17.0.2",
"react-redux": "^7.2.4",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"react-transition-group": "^4.4.2",
"redux": "^4.1.0",
"redux-devtools-extension": "^2.13.9",
"redux-thunk": "^2.3.0",
"web-vitals": "^1.1.2"
},
"scripts": {
"dev": "webpack --mode development --watch ./frontend/src/index.js --output-path ./frontend/static/frontend/",
"build": "webpack --mode production ./frontend/src/index.js --output-path ./frontend/static/frontend/",
"test": "cypress open"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"#babel/preset-react": "^7.14.5",
"babel-loader": "^8.2.2",
"babel-plugin-transform-class-properties": "^6.24.1",
"css-loader": "^6.1.0",
"speed-measure-webpack-plugin": "^1.5.0",
"style-loader": "^3.1.0",
"webpack": "^5.38.1",
"webpack-cli": "^4.7.2"
}
}
webpack.config.js
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
const smp = new SpeedMeasurePlugin()
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
{
test: /\.css$/,
exclude: /node_modules/,
use: ["style-loader", "css-loader"],
},
],
},
}
Any help is greatly appreciated. I thought the speed measure plugin was causing issues, so I removed the wrapper for now.

Answer 1

After hours of searching...The problem was with my import statement. I had the same name but incorrect casing.
FileName: MyComponent.js
wrong
import MyComponent from "./myComponent
correct
imoprt MyComponnent from "./MyComponent