Nuxt.js: WSL: Hot reloading issue

[retep0214]

Version

v2.6.2

Reproduction link

http://localhost:3000

Steps to reproduce

1) yarn create nuxt-app test-nuxt-2 --edge

yarn create v1.15.2
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Installed "[email protected]" with binaries:

  - create-nuxt-app

Generating Nuxt.js project in C:\Users\peter\Documents\TestingProject\test-nuxt-2

? Project name test-nuxt-2
? Project description My marvelous Nuxt.js project
? Use a custom server framework none
? Choose features to install Progressive Web App (PWA) Support, Axios
? Use a custom UI framework bootstrap
? Use a custom test framework none
? Choose rendering mode Universal
? Author name Peter
? Choose a package manager yarn

2) cd test-nuxt-2
3) yarn dev
4) After the page loaded, change the text in index.vue
5) The terminal shows that the nuxt is compiling the Client and server
6) Nothing changed and no error in console after finish compiling

What is expected ?

The text will updated without refresh

What is actually happening?

No chnaged and need to refresh

Additional comments?

I remember that It works when I built the project on Mac, is it the bug in Windows Env ?

_{This bug report is available on Nuxt community (#c9065)}

[idrislab]

What are your package.json contents?

[retep0214]

@idrislab Here is my package.json.

{
"name": "test-nuxt-2",
"version": "1.0.0",
"description": "My marvelous Nuxt.js project",
"author": "Peter",
"private": true,
"scripts": {
"dev": "nuxt",
"build": "nuxt build",
"start": "nuxt start",
"generate": "nuxt generate"
},
"dependencies": {
"cross-env": "^5.2.0",
"nuxt-edge": "latest",
"bootstrap-vue": "^2.0.0-rc.11",
"bootstrap": "^4.1.3",
"@nuxtjs/axios": "^5.3.6",
"@nuxtjs/pwa": "^2.6.0"
},
"devDependencies": {
"nodemon": "^1.18.9"
}
}

[davision]

Do you have extractCSS: true in nuxt.config.js?

[retep0214]

@davision no

[fl-username]

Same issue I have, just installed new project. When I change style it reloads, when I change text, it reloads, but when I add some new html tag in template, page not reloads. In network I see some requests, but new content not appears on page, and I have to press F5.

package.json

{
  "name": "My Project",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt"
  },
  "dependencies": {
    "@nuxtjs/style-resources": "^0.1.2",
    "babel-polyfill": "^6.26.0",
    "bootstrap": "^4.3.1",
    "normalize.css": "^8.0.1",
    "nuxt": "^2.6.1",
    "vue": "^2.6.10",
    "vuex": "^3.1.0"
  },
  "devDependencies": {
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0"
  }
}

nuxt.config.js

export default {
  srcDir: "layouts/theme-light",

  server: {
    port: 3000,
    host: `0.0.0.0`,
  },

  modules: ["@nuxtjs/style-resources"],

  styleResources: {
    scss: ["./node_modules/bootstrap/scss/bootstrap-grid.scss"],
  },

  css: [
    `node_modules/normalize.css/normalize.css`,
    `style/main.scss`,
  ],

  head: {
    title: `My Project`,
    meta: [
      { charset: `utf-8` },
      {
        name: `viewport`,
        content: `width=device-width, initial-scale=1, maximum-scale=1`,
      },
    ],
  },
};

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[fl-username]

Any sugestions or work rounds? It will be very helpful.

[mojereliev]

Hello, same problem with hot reload.
Downgrade to 2.4.5 resolved issue, but is not good.
Any ideas?

[usb248]

Same result in 2.7.1, i need to do F5 when i modify .styl files ...

[manniL]

Instead of commenting "same problem", please provide a reproduction. :relaxed:

[usb248]

@manniL , you have already the repo...
Simply try an example : https://github.com/nuxt/nuxt.js/tree/dev/examples/with-vuetify
npm install && npm run dev

Add a styl file in asset, modify this styl file
css: ['~/assets/app.styl', '~/assets/test.styl']

h2
    background:blue

, look reload page, modify second time the file,

h2
    background:red

nothing happens ( [HMR] Nothing hot updated.) whereas you changed file....

[manniL]

See #5390 @usb248

[nataliawww]

+1

[dgarcia-saaskun]

I have created a basic project with only Nuxt.

1. Run the command: npm run dev
2. Open in the browser: localhost:3000 (Chrome)
3. Update any text on index.html, For example, the button text "Documentation" to "Other text"
4. Expected: The change is reflected on the browser.
   Current behavior: The Nuxt loader is showed, but the text doesn't change
5. Refresh the page
6. All the changes are present.

OS: Windows 10
NPM: 5.6.0
nuxt/core: 2.8.1

{ "name": "basic", "version": "1.0.0", "description": "My wondrous Nuxt.js project", "author": "skgarcia", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "nuxt": "^2.0.0" }, "devDependencies": { "nodemon": "^1.18.9" } }
package-lock.zip

[kriss145]

Still the same problem on me.

Nuxt: 2.7.1

[SHxKM]

Hot reloading stopped working for me after upgrading to 2.8.1 from 2.6.x. A clean Nuxt.js install on codesandbox doesn't replicate but enough people seem to be suffering from this regression. Maybe we should share our dependencies and try to find what's common?

For me setting extractCSS to false fixes the hot reloading issue. Any ideas?

Edit: in my case it was just a matter of adding the right classes for the extractor to ignore since these changes between 2.6.x and 2.8.1.

[NinthAutumn]

+1

[jhhosbond]

Anyone with a fix on this?

Struggling with the same issue.

{ "name": "nuxt-test", "version": "1.0.0", "description": "My great Nuxt.js project", "author": "Mr. Nuxt", "private": true, "scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start", "generate": "nuxt generate" }, "dependencies": { "@nuxtjs/bulma": "^1.2.1", "nuxt": "latest" }, "devDependencies": { "nodemon": "^1.18.9" } }

[Atinux]

Hi, thank you for the bug report,

Please provide a reproduction link so we can investigate, you can also use https://template.nuxtjs.org as starter.

Thank you 😊

[nickeblewis]

You are more than welcome to have a look at
https://github.com/nickeblewis/nfolio.com.4

On Thu, 8 Aug 2019 at 16:52, Sébastien Chopin [e-mail]
wrote:

Hi, thank you for the bug report,

Please provide a reproduction link so we can investigate, you can also use
https://template.nuxtjs.org as starter.

Thank you 😊

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/5550?email_source=notifications&email_token=AADLTHETU5WF437KDVDUHYLQDQ6LBA5CNFSM4HGQXBBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD34B6NA#issuecomment-519577396,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADLTHC4MX37TK2MXGLVXWLQDQ6LBANCNFSM4HGQXBBA
.

--

---Nick Lewis

Visit google.com/+NickLewis http://google.com/+NickLewis for my online
profile

[manniL]

Can repro it with the repo from @nickeblewis

[manniL]

Update: Looks like some Sanity requests are failing (at least on my clone of the repo) and that the app isn't ever fully loaded. Thus, no real HMR.

cc @nickeblewis

[nickeblewis]

Thanks for taking a look and I shall investigate the failed requests that I
admit I hadn't noticed, so much appreciated.

On Thu, 8 Aug 2019 at 21:01, Alexander Lichter [e-mail]
wrote:

Update: Looks like some Sanity requests are failing (at least on my clone
of the repo) and that the app isn't ever fully loaded. Thus, no real HMR.

cc @nickeblewis https://github.com/nickeblewis

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/5550?email_source=notifications&email_token=AADLTHCKNOZ44NEN2YKWTALQDR3RVA5CNFSM4HGQXBBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD34XVXY#issuecomment-519666399,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADLTHB443TSXOLK7KINKPTQDR3RVANCNFSM4HGQXBBA
.

--

---Nick Lewis

Visit google.com/+NickLewis http://google.com/+NickLewis for my online
profile

[nickeblewis]

I have fixed the sanity issue which was a CORS problem and this has killed
off a lot of errors but now I’m seeing an issue where the virtual Dom is
out of sync and this may be down to a particular component that is
incompatible. Now HMR works for awhile and then stops. It’s a bit sporadic
so I might try taking some components out until HMR works and then
gradually add components back in until it crashes again. Hopefully that may
identify the culprit and I shall then try wrapping that with

On Thu, 8 Aug 2019 at 21:57, Nick Lewis [e-mail] wrote:

Thanks for taking a look and I shall investigate the failed requests that
I admit I hadn't noticed, so much appreciated.

On Thu, 8 Aug 2019 at 21:01, Alexander Lichter [e-mail]
wrote:

Update: Looks like some Sanity requests are failing (at least on my clone
of the repo) and that the app isn't ever fully loaded. Thus, no real HMR.

cc @nickeblewis https://github.com/nickeblewis

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/nuxt/nuxt.js/issues/5550?email_source=notifications&email_token=AADLTHCKNOZ44NEN2YKWTALQDR3RVA5CNFSM4HGQXBBKYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOD34XVXY#issuecomment-519666399,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AADLTHB443TSXOLK7KINKPTQDR3RVANCNFSM4HGQXBBA
.

--

---Nick Lewis

Visit google.com/+NickLewis http://google.com/+NickLewis for my online
profile

>

---Nick Lewis

Visit google.com/+NickLewis http://google.com/+NickLewis for my online
profile

[timmyd87]

I started with a fresh Nuxt app yesterday using Vuetify and hot reload isn't working for me either. Has anyone found a solution? Using Nuxt v2.8.1

[di-ma-73]

I started with a fresh Nuxt app yesterday using Vuetify and hot reload isn't working for me either. Has anyone found a solution? Using Nuxt v2.8.1

I did install nuxt via yarn create nuxt-app example-app and HMR (yarn dev) worked properly.
I tried to change html of component (VuetifyLogo), html of page (index, inspire), css of both. All changes were displayed in Opera.
(Windows, Nuxt 2.0.0, 2.6.2, @nuxtjs/vuetify 1.0.0)

Dependencies (package.json)

"dependencies": {
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "nuxt": "^2.6.2"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.0.0"
  }

**About not working HMR in some conditions (maybe someone finds it useful)** > `nuxt`/`yarn dev` (HMR) does not work properly in Microsoft Edge. I suggest use a chromium-based browser instead. - Disable `build.extractCSS` in development mode

build: {
    extractCSS: process.env.NODE_ENV !== 'development'
}

[timmyd87]

Thanks @di-ma-73 i appreciate your response. I'm still having the same problem and seeing issues popping up that may suggest this is a WSL2 issue with Windows.

[evanrlong]

I think I have a solution to this problem...

When I run a brand new Nuxt project (generated with create-nuxt-app, all default options) hmr does not work properly. This is only on my Windows machine, Mac/Linux works fine.

Looking at my network tab in Chrome devtools, I see that the "client" hmr script is not loading properly. It sits in "pending" status for about 30 seconds and then times out.

I haven't overwritten any default settings in nuxt.config.js, so my server host setting is still the default...

  server: {
    host: 'localhost'
  }

After some googling, I found this issue in the webpack-hot-middleware project that seemed to fit.

Sure enough, changing my server host setting to the following fixes the hmr issues...

  server: {
    host: ''
  }

The only remaining problem is a malformed printout in the server cli output...

Maybe we could modify nuxt to treat a server host setting of 'localhost' as '' behind the scenes but still print out...

[edimitchel]

I am on WSL too, and for making HMR work, I had to resave my file after the partial rebuild.
Please follow above info from @evanrlong comment for getting rid of this issue.

Thanks !

[evanrlong]

Any thoughts on my posted solution @manniL or @Atinux? You can replicate it using the basic hello-world example in the nuxt.js repo. Run that using a Windows 10 PC using either a git bash or wsl shell (maybe also powershell and cmd?) and you will notice the hmr not working.

Updating the nuxt.config.js file in the example root to the following fixes the problem...

export default {
  server: {
    host: ''
  }
}

[edimitchel]

Updating the nuxt.config.js file in the example root to the following fixes the problem...

export default {
  server: {
    host: ''
  }
}

For me, this not fix the issue ! I still have to double save for getting change in the browser..

[evanrlong]

@edimitchel, are you seeing the double save issue in the example project I linked or in a different project you are running?

What was the behavior you saw before you tried my fix? Was it...

before fix: no HMR
after fix: HMR but only after saving a file twice

or was it...

before fix: HMR but only after saving a file twice
after fix: same (no change)

Also is the page actually hot reloading for you or is it refreshing the entire page?

[evanrlong]

By the way, I did confirm that this issue exists and is fixed by my proposed change for cmd.exe and powershell users as well.

[edimitchel]

@edimitchel, are you seeing the double save issue in the example project I linked or in a different project you are running?

In my project.

before fix: HMR but only after saving a file twice
after fix: same (no change)

This one. The issue is same after and before your fix. I still use WSL.
Another info : may be I have WebSocket restriction on my computer. I got the same issue with Angular CLI.

[evanrlong]

@edimitchel, it sounds like you might be experiencing a different (although potentially related) problem. If your computer is restricting WebSockets, that could certainly cause problems with HMR. I don't know that such an issue could be fixed inside Nuxt though.

Are you running nuxt natively or as a middleware inside a different server (like Express)?

[edimitchel]

Are you running nuxt natively or as a middleware inside a different server (like Express)?

Natively

[evanrlong]

@edimitchel, unfortunately, I haven't been able to replicate your issue. I believe its a separate issue though, potentially related to the WebSocket restrictions you mentioned. Maybe try running the example project I posted and see if you have the same issues? Also running the example in a different shell (not wsl) and/or a different windows machine might reveal some additional info.

In the meantime, I think my fix is still relevant to include in nuxt.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[evanrlong]

@manniL and @Atinux, I don't believe this should be closed. This fix would resolve a lot of problems for windows users...

I think I have a solution to this problem...

When I run a brand new Nuxt project (generated with create-nuxt-app, all default options) hmr does not work properly. This is only on my Windows machine, Mac/Linux works fine.

Looking at my network tab in Chrome devtools, I see that the "client" hmr script is not loading properly. It sits in "pending" status for about 30 seconds and then times out.

I haven't overwritten any default settings in nuxt.config.js, so my server host setting is still the default...

  server: {
    host: 'localhost'
  }

After some googling, I found this issue in the webpack-hot-middleware project that seemed to fit.

Sure enough, changing my server host setting to the following fixes the hmr issues...

  server: {
    host: ''
  }

The only remaining problem is a malformed printout in the server cli output...

Maybe we could modify nuxt to treat a server host setting of 'localhost' as '' behind the scenes but still print out...

[jcfinnerup]

+1

[andre-brdoch]

maybe obvious, but for a project with disabled scripts, HMR will also not work. if you want to keep scripts disabled in production, but use HMR in development, this works:

// nuxt.config.js
render: {
    // working:
    injectScripts: process.env.NODE_ENV === 'development'

    // HMR not working:
    // injectScripts: false,
  },

[antonreshetov]

+1 same issue in v2.10.0

[CraftingGamerTom]

+1 same issue on v2.12.0

[jcfinnerup]

+1 same issue on v2.12.0

When i hard reload the window, it always stops responding the 3rd time. 3rd reload always crashes the reload. The fix above setting server:'' doesn't work for me

[mahapo]

+1 same issue on v2.12.2

with

  server: {
    host: "0.0.0.0",
  },

[dicruzg]

I'm having this issue but in my case is worst because when I start the server (yarn dev) If I modify a file and save it there is no change in the browser until I manually restart the server. I'm using
Nuxt.js v2.12.2
Windows 10
WSL 2 with Ubuntu 20.04
Any browser

[zsid]

I am having the same issue. Hot reloading is broken. I have just done https://nuxtjs.org/guide/installation, following up the set up steps.

When I change the title in the navigation, it is not reloading at all. I am a Mac user.

Here is my repo and I have just pushed - https://nuxtjs.org/guide/installation. I would imagine anyone starting a new project and just running the cli will experience that problem.

The error I am getting is:

Uncaught (in promise) Error: Manifest request to /_nuxt/d29dc8974cb9d80a2dcb.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange

[zsid]

I have done some experimenting with my node version. I was using v.10.14.0 and the reloading wasnt working. I changed it to 12.17.0 and it seems fine at the moment.

[prakashpie]

I am having the same issue. Hot reloading is broken. I have just done https://nuxtjs.org/guide/installation, following up the set up steps.

When I change the title in the navigation, it is not reloading at all. I am a Mac user.

Here is my repo and I have just pushed - https://nuxtjs.org/guide/installation. I would imagine anyone starting a new project and just running the cli will experience that problem.

The error I am getting is:

Uncaught (in promise) Error: Manifest request to /_nuxt/d29dc8974cb9d80a2dcb.hot-update.json timed out.
    at XMLHttpRequest.request.onreadystatechange

i have the same problem on mac. node v is 14.4.0
Any update on this?

[Limonische]

For me the reason for this behavior was that I used lowercase name in my import, but the actual folder was named in PascalCase. After i changed the import the problem was resolved. I am using latest versions of Node and Nuxt.

[jos-]

For me this seems to happen when I have opened multiple tabs/windows of the development environment. Using a single tab, hot reload seems to work fine. Hope this helps.

Nuxt.js v2.12.2
SPA mode
MacOS 10.15.4
Node v14.4.0

[MrToxy]

I was having the exact same issue as the one describded plus a few other ones, mainly a severe slowdown on nearly every process from npm install to composer install or git commands.

While debugging the issue with a friend we noticed that I had the project on windows while running it with the wsl bash and that slowed down everything.
After moving the project to wsl (in my case ubuntu) HMR worked as expected and an increase in speed was fairly noticable.

So my tip is just to run everything from within WSL as the symlink for the shared folder between the host and the VM is really really slow.

Versions when incident occurred:

Nuxt.js v2.12.2
Windows 10
WSL 2 with Ubuntu 20.04

[prikeshsavla]

+1 Same issue.
In one of the cases I removed the sw.js register for serviceworker and it worked for me. I was not using the PWA option but it was still register because of another application that used it.

[pachiraDIG]

I'm having this issue but in my case is worst because when I start the server (yarn dev) If I modify a file and save it there is no change in the browser until I manually restart the server. I'm using
Nuxt.js v2.12.2
Windows 10
WSL 2 with Ubuntu 20.04
Any browser

@dicruzg Did you end up solving your problem? I have the exact same env except running Nuxt 12.13.2.

[prikeshsavla]

My issue got fixed with unregistering the sw.js when i was not using the PWA module.

[chenhaitang]

+1
Is there a solution now? After modifying the file, the page will not be updated, you must re-execute npm run dev.

[pachiraDIG]

I solved this when moving to WSL2 by moving my working directory, like @MrToxy . Reading the WSL2 docs, I found that a big difference is how secluded the Linux/windows environments are now since v2 brings a full Linux shell. Using a directory like /mnt/c/... in v1 to keep things in the Windows file system would work and was fast enough. But now we just need to move things in to a linux-exclusive directory like home/users/me. Then hot reloading works like a charm as before AND it is *much faster.

Then if using VSCode, we just need to install the Remote WSL extension. Then either launch from Linux with code . or from within VSCode hitting F1 and searching "remote WSL" to open a new WSL window.

[dicruzg]

I'm having this issue but in my case is worst because when I start the server (yarn dev) If I modify a file and save it there is no change in the browser until I manually restart the server. I'm using
Nuxt.js v2.12.2
Windows 10
WSL 2 with Ubuntu 20.04
Any browser

@dicruzg Did you end up solving your problem? I have the exact same env except running Nuxt 12.13.2.

Solved using Linux exclusive directories as you suggest. 👏🏻👏🏻👏🏻👏🏻

[cthom-dev]

disabling ad blocker for localhost fixed this issue for me.

Browser: Chrome
Ad Blocker: uBlock Origin

[willypelz]

I am using nuxt/cli v2.14.1 and I still face this issue.

[sparkidea25]

Hello i am using nuxt/cli v2.14.5 and i face hot reloading issues not working for me, any fix please, thanks

[pratyushtewari]

I solved this when moving to WSL2 by moving my working directory, like @MrToxy . Reading the WSL2 docs, I found that a big difference is how secluded the Linux/windows environments are now since v2 brings a full Linux shell. Using a directory like /mnt/c/... in v1 to keep things in the Windows file system would work and was fast enough. But now we just need to move things in to a linux-exclusive directory like home/users/me. Then hot reloading works like a charm as before AND it is *much faster.

Then if using VSCode, we just need to install the Remote WSL extension. Then either launch from Linux with code . or from within VSCode hitting F1 and searching "remote WSL" to open a new WSL window.

Thank you so much @pachiraDIG

This would solve the hot reloading issue. Also, it will decrease the build time tremendously.
If you need to access your linux file system from explorer so that you can easily copy paste files etc .. run explorer.exe .. It will open a $wsl folder in your explorer and you can access all the files there as well.