Hot reload connection can fail on Windows

[MateusFP95]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

v14.17.0

What browser are you using?

Edge 91.0.864.67 - Chrome 91.0.4472.124

What operating system are you using?

Windows 10 Pro 20H2

How are you deploying your application?

npm run dev

Describe the Bug

Hot reload / Fast Refresh isn't working.

I'm following the next tutorial, so here's my code:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

Here https://nextjs.org/learn/basics/create-nextjs-app/editing-the-page it says that the page will live reload, just like react / vue, but it doenst reload.

On network tab I see this errors:

Approaches tried following google/yt tutorials:
Create next.config.js with FAST_REFRESH='TRUE'
Create webpack.config.js with TARGET = 'WEB'
Delete project and restarted from 0
npm ci
Delete node_modules and .next and recreated

Expected Behavior

Live reload should work.

To Reproduce

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

[ijjk]

Hi, can you provide more information on your environment? Are there any error messages in the console tab of your browser? Do you have any network configuration or proxying being done that could interfere with a persistent connection being opened to the local Next.js server?

[MateusFP95]

Hi, can you provide more information on your environment? Are there any error messages in the console tab of your browser? Do you have any network configuration or proxying being done that could interfere with a persistent connection being opened to the local Next.js server?

Visual Studio Code about info:
Version: 1.57.1 (system setup)
Commit: 507ce72a4466fbb27b715c3722558bb15afa9f48
Date: 2021-06-17T13:28:07.755Z (4 wks ago)
Electron: 12.0.7
Chrome: 89.0.4389.128
Node.js: 14.16.0
V8: 8.9.255.25-electron.0
OS: Windows_NT x64 10.0.19042

No console messages, neither sucess or failure. Browser config is default, works fine with react/vue reload. No proxy.

Also tried to run Chrome on anonymous mode with extensions (ADBlock) off, no changes. Edge was default, since I never really use it.

[ijjk]

@MateusFP95 thanks for the additional info, can you confirm the Next.js version installed by running yarn why next or npm ls next? It looks like the example from the learn repo needs updating to the latest Next.js version.

[MateusFP95]

@MateusFP95 thanks for the additional info, can you confirm the Next.js version installed by running yarn why next or npm ls next? It looks like the example from the learn repo needs updating to the latest Next.js version.

Running npm ls next I got next@10.0.6, which I get from the tutorial.

But, after I run npm install react@latest react-dom@latest I got the same results, hot reload not work and CANCELED status on network tab

[ijjk]

Did you also run npm install next@latest it looks like that one isn't included in the snippet above. If it still doesn't work after ensuring the latest Next.js version is installed could you try running npm install next@10.0.5 to see if it is related to this comment and potentially this issue

[MateusFP95]

Did you also run npm install next@latest it looks like that one isn't included in the snippet above. If it still doesn't work after ensuring the latest Next.js version is installed could you try running npm install next@10.0.5 to see if it is related to this comment and potentially this issue

next@latest installed next@11.0.1, which didn't work and apresent same behaviour (nothing on console, no hot reload, canceled network messages, etc).

But npm install next@10.0.5 Worked!
With console messages

And 0 network errors

[ijjk]

Interesting thanks for testing that! Glad we've narrowed in on a version, could you try to narrow in on a specific canary it occurred on so we can try to figure out which change caused this to not work? There are 12 canaries between v10.0.5 and v10.0.6 they can be installed with npm install next@10.0.5-canary.6 replace .5 with the canary number from 1 - 12

I'm not able to reproduce this on a Windows 10 Pro laptop I have access to so it may be specific to certain Windows versions 🤔

[shadowwalker]

Test result below on yarn create next-app:

• next@10.0.6-canary.7 works fine
• next@10.0.6-canary.8 doesn't work

Versions

• Windows 10 Pro 21H1 OS Build 19043.1110
• Node versions manager nvm-windows 1.1.7
• Node.js version 14.17.3
• Yarn version 1.22.10
• React and React-DOM 17.0.2
• Powershell 7.1.3

@ijjk I don't think it's related to certain windows build, as create-react-app works totally fine for me, umi.js (which uses @pmmmwh/react-refresh-webpack-plugin, see here) also works fine.

[ijjk]

@shadowwalker yeah it sounds like this may be related to #20409

[ijjk]

@shadowwalker @MateusFP95 could you please confirm this is the issue by testing a patch that reverts that PR's host change by running npm install next@https://github.com/ijjk/next-update-loader.git#3e01c6bbc9f808f41c49c1e2118ca751d89ca725?

[shadowwalker]

@shadowwalker @MateusFP95 could you please confirm this is the issue by testing a patch that reverts that PR's host change by running npm install next@https://github.com/ijjk/next-update-loader.git#3e01c6bbc9f808f41c49c1e2118ca751d89ca725?

@ijjk Confirm the patch fix the issue, fast refresh works as expected after apply the patch

[ijjk]

This has been updated in v11.0.2-canary.17 of Next.js, please update and give it a try!

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.