'Why doesn't my browser refresh when the Nuxt.js dev server recompiles my code?

I am working in a CentOS 7 VM (VirtualBox, host is Windows 10) and my working directory is a shared folder.

I have created a node container to develop a Nuxt.js app with the following command:

docker run --name nuxt-fun -v "${PWD}:/$(basename $PWD)" -w "/$(basename $PWD)" -p 3002:3000 --entrypoint sh -it node:16-alpine

I successfully installed Nuxt using yarn create nuxt-app nuxt-fundamentals.

I added the following to the nuxt.config.js file to enable hot module replacement HMR and access from http://localhost:3002/:

server: {
  host: '0',
  port: 3000
},
watchers: {
  webpack: {
    poll: true
  }
}

When I then run the dev server with yarn dev I see the following

$ nuxt

   ╭────────────────────────────────────────╮
   │                                        │
   │   Nuxt @ v2.15.8                       │
   │                                        │
   │   ▸ Environment: development           │
   │   ▸ Rendering:   server-side           │
   │   ▸ Target:      server                │
   │                                        │
   │   Listening: http://172.17.0.2:3000/   │
   │                                        │
   ╰────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                  13:58:35
ℹ Initial build may take a while                                                                                                                                     13:58:35
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                  13:58:35
✔ Builder initialized                                                                                                                                                13:58:35
✔ Nuxt files generated                                                                                                                                               13:58:35

✔ Client
  Compiled successfully in 7.53s

✔ Server
  Compiled successfully in 5.02s

I go to components/Tutorial.vue and modify the content of a p tag and save the file. The code is recompiled by the dev server but in order to see it in my browser I must manually refresh the page.

Is there some config that I'm missing?

Update1: After 30s I see this error in the console: EventSource failed loading: GET "http://localhost:3002/__webpack_hmr/client".



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source