HMR is not working on basic setup

[shellparse]

i am setting up a dev server using webpack-plugin-serve
something really basic
this is the structure of the project

my config file

const path = require('path');
const { WebpackPluginServe: Serve } = require('webpack-plugin-serve');
module.exports = {
  watch:true,
  mode:"development",
  entry: ['webpack-plugin-serve/client','./src/index.js'],
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins:[
    new Serve({
        static:"./dist",
        client:{address:"localhost:55555"}
    })
  ]
};

everything works as intended the browser opens and displays the div
the problem is with HMR
as soon as i edit my index.js and save i get this error in the console :

i looked everywhere on the internet for something similar but couldn't find any help been with this problem for 2 days now trying
with more than 10 empty projects and different possible causes but no luck that's why I'm writing here

maybe I'm missing something
thank you for anyhelp