webpack dev server only reloads once

Question

Ok so now i have read a lot of different issues on stackoverflow without any luck, they seem all to go to an older version of webpack-dev-server.

I have tried a lot of things but without any luck, my little app simply wont reload/rebuild more than once.

The things that I change is text add and remove inside app.tsx. Other things is adding and

tags.

I hope someone can give me a hint

The pictures shows me saving after change.

My webpack.config

const path = require("path");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "public"),
    filename: "main.js",
  },

  target: "web",
  devServer: {
    port: "3000",
    static: ["./public"],
    open: true,
    hot: false,
    liveReload: true,
  },
  resolve: {
    extensions: [".js", ".jsx", ".json", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};

My package.json

{
  "name": "reactone",
  "version": "1.0.0",
  "description": "",
  "main": "./src/index.js",
  "scripts": {
    "start": "webpack serve --mode development --env development",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.17.9",
    "@babel/eslint-parser": "^7.17.0",
    "@babel/plugin-transform-runtime": "^7.17.0",
    "@babel/preset-env": "^7.16.11",
    "@babel/preset-react": "^7.16.7",
    "@babel/preset-typescript": "^7.16.7",
    "@babel/runtime": "^7.17.9",
    "babel-loader": "^8.2.4",
    "babel-plugin-transform-scss": "^1.1.0",
    "css-loader": "^6.7.1",
    "dart-sass": "^1.25.0",
    "html-webpack-plugin": "^5.5.0",
    "sass-loader": "^12.6.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.72.0",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.8.1"
  },
  "dependencies": {
    "@types/node": "^17.0.24",
    "@types/react": "^18.0.4",
    "@types/react-dom": "^18.0.0",
    "mobx": "^6.5.0",
    "mobx-react": "^7.3.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "typescript": "^4.6.3"
  }
}

my files setup

Answer 1

Thanks to your article, I found the cause of exactly the same problem

my config looks like this:

// ....
target: "web"
devtool: 'inline-source-map',
mode: 'development',
devServer: {
 static: ["./public"],
 open: true,
 hot: false,
 liveReload: true,
 historyApiFallback: true,
 historyApiFallback: {
  rewrites: historyApiFallbackRewritesGenerator()
 },
}
// ....

I hope this helps you

besides, I am attaching a link to my build configuration for a complete understanding webpack-template