Props values are not updating in webpack server React js

Question

Whenever I try to pass or update the props value from parent to child I need to restart the webpack server everytime. I don't know why props value are not getting updating after saving the file.

Here is my package.json file

{
  "name": "react-hooks",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server .",
    "build": "Webpack .",
    "test": "test"
  },
  "author": "Rasith",
  "license": "MIT",
  "devDependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.17.10",
    "@babel/plugin-transform-runtime": "^7.17.10",
    "@babel/preset-env": "^7.17.10",
    "@babel/preset-react": "^7.16.7",
    "@babel/runtime": "^7.17.9",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.5",
    "webpack": "^5.72.1",
    "webpack-cli": "^4.9.2",
    "webpack-dev-server": "^4.9.0"
  },
  "dependencies": {
    "axios": "^0.27.2",
    "react": "^18.1.0",
    "react-dom": "^18.1.0"
  }
}

This is my webpack.config.js file

const path = require("path");

module.exports={

    mode: "development", 
    entry: "./index.js", 
    output: {

        path: path.resolve(__dirname, "public"),
        filename: "main.js"
    },

    target: "web",
    devServer: {
        port: "9500",
        static: ["./public"],
        open: true,
        hot: true ,
        liveReload: true
    },
    resolve: {

        extensions: ['.js','.jsx','.json'] 
    },
    module:{

        rules: [
            {
                test: /\.(js|jsx)$/,   
                exclude: /node_modules/, 
                use:  'babel-loader'
            }
        ]
    }
}

babel.rc file

{

    "presets": [
        "@babel/preset-env", //compiling ES2015+ syntax
        "@babel/preset-react" //for react
    ],
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

which dependency or modules is missing in the files. please help me on this developers. Thanks

Answer 1

You probably need the HMR plugin.

Add this entry to your webpack config:

plugins: [
  new webpack.HotModuleReplacementPlugin({
   multiStep: true
  })
]

https://webpack.js.org/plugins/hot-module-replacement-plugin/