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 "create-nuxt-app@2.6.0" 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)}

[luispittagros]

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 notifications@github.com 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 notifications@github.com 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 nickeblewis@gmail.com 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 notifications@github.com 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.