[ERROR] HMR not working

[angelhdzmultimedia]

Followed the guide 100%. for Express.

Executed npm run dev.

Server started successfully.

Made a change in the code.

Browser content didn't change.

Hit F5 on browser to refresh the content.

Error: listen EADDRINUSE: address already in use :::3000

[guillaumecatel]

The HMR must want to rerun the listen function. Did you enclose app.listen(port) like this?

if (process.env.NODE_ENV === 'production') {
  app.listen(port)
}

// or:

if (import.meta.env.PROD) {
  app.listen(port);
}

[angelhdzmultimedia]

Yes.

[angelhdzmultimedia]

The error when hitting F5 on the browser seems to have gone away. I can refresh the browser, and get the updated content, but still HMR doesn't do that automatically as it should.

[angelhdzmultimedia]

https://user-images.githubusercontent.com/10191085/185493552-da652d05-de6d-4a26-84ad-eb41ab5864a3.mp4

[MarvinXu]

I think it works exactly as it should be. It's HMR for the server! The module of server is updated without server restarting. You can't expect it to make the client to resend the request!

[angelhdzmultimedia]

I think it works exactly as it should be. It's HMR for the server! The module of server is updated without server restarting. You can't expect it to make the client to resend the request!

Oh damn, The Dumb Moment!

So much time working with HMR on client Vue that I got used to it and when trying on server got confused there.

Thank you! :P

[lovedder1995]

I found this solution:

npm i -D browser-sync

// package.json
{
  "scripts": {
    "dev": "vite"
  }
}

npm run dev

And after the server starts

npx browser-sync start --proxy "localhost:3000" --files "src/**/*"