'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 |
---|