V10 dev breaks React Fast Refresh on Gatsby sites

[nonAlgebraic]

Describe the bug

Since version 10, using netlify-cli in a Gatsby project and serving the site in develop mode locally using netlify dev seems to break React Fast Refresh/hot reloading in the browser. Hot reloading still works fine when browsing the site via the underlying Gatsby dev server instead of netlify-cli's.

Expected behavior

Making a change to a React component in the source code automatically updates the rendered markup on the website in local develop mode, thanks to React Fast Refresh/hot reloading.

Observed behavior

When accessing the local develop site via netlify-cli's dev server (i.e., via localhost:8888 rather than localhost:8000) hot reloading does not work at all.

Steps to reproduce

1. Clone this minimal reproduction repo, and run npm install.
2. Run npm start to start the netlify-cli dev server.
3. Change something, like JSX, in src/pages/index.js.
4. Observe that it does not hot-reload in the browser.
5. Browse to http://localhost:8000 (the underlying Gatsby dev server).
6. Try again; observe that Fast Refresh is working fine.
7. Downgrade to netlify-cli@^9.
8. Browse to http://localhost:8888 (the netlify-cli dev server).
9. Try again; observe that Fast Refresh is working fine.

Configuration

Bug is demonstrable with zero config.

Environment

System:
    OS: macOS 12.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 88.89 MB / 16.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.3.1 - ~/.nvm/versions/node/v16.14.0/bin/npm
  npmPackages:
    netlify-cli: ^10.1.0 => 10.1.0

[jlevy-io]

Seeing exact same behavior on Windows/WSL2 since upgrading to v10 of Netlify CLI

[walker-tx]

I'm also experiencing this

[chocobuckle]

Same issue here. gatsby develop working as expected, but not netlify dev

[walker-tx]

In the meantime, installing netlify-cli@9.16.7 as a dev dependency to your repo, then using yarn run netlify dev seems to work.

[jansengunderson]

Downgrading to netlify-cli@9.16.7 and using ntl dev worked for me.

[laurentlaporte]

I believe its because of the new support for Edge Functions in v10, every requests including hot reload related requests are being intercepted and it breaks the hot reload

[jlevy-io]

Was struggling with this again this week and discovered that I'm using the LTS default for nvm. Apparently 16.16.0 causes this issue as well, not just 17+. Rolled back to 16.14.2 and everything works fine again (with netlify-cli @^9) on my gatsby project

[jansengunderson]

I believe its because of the new support for Edge Functions in v10, every requests including hot reload related requests are being intercepted and it breaks the hot reload

Thanks for this info. Viewing our sites on port 8000 (rather than functions port 8888) and hot reload works. Of course functions will not.

[chocobuckle]

Is there any update on this? Not being able to use netlify-cli v10 with Gatsby is quite a bummer.

[tinfoil-knight]

@eduardoboucas

Currently, hot-reload is not working for a lot of frameworks which is preventing people from upgrading beyond netlify-cli/v9.16.7.

Related Issue: #4727

I'm not able to make further progress on the issue & thus tagging you here. I've narrowed the bug down to a single function.

---

The error is originating in this PR: #4550

Specifically due to the changes under the proxy event listener for the proxyRes event.

cli/src/utils/proxy.js

Lines 333 to 337 in 7a73873

	}
	})
	proxy.on('proxyRes', (proxyRes, req, res) => {
	if (proxyRes.statusCode === 404 || proxyRes.statusCode === 403) {
	if (req.alternativePaths && req.alternativePaths.length !== 0) {

See the diff for the exact changes.

Note
Reverting the changes done under the proxyRes event listener fixes the issue.
Tested with v10.0.0 (first release containing the PR) & latest release v12.0.11.

---

Additionally, the changes in the handler for the error event result in unhandled errors in case of websocket responses since writeHead doesn't exist when res is of type Socket.

cli/src/utils/proxy.js

Lines 310 to 320 in 7a73873

	proxy.on('error', (_, req, res) => {
	res.writeHead(500, {
	'Content-Type': 'text/plain',
	})
	const message = edgeFunctions.isEdgeFunctionsRequest(req)
	? 'There was an error with an Edge Function. Please check the terminal for more details.'
	: 'Could not proxy request.'
	res.end(message)
	})

cc: @danez

[malcolmmurdock]

Can confirm this is an issue with Nuxt apps as well. netlify-cli v10+ fails to hot reload on functions port 8888 even when underlying nuxt dev server is hot reloading fine.

[Skn0tt]

I'll be looking into this. Thanks a lot @tinfoil-knight for researching this so thoroughly, this helps tremendously!

My suspicion is that the buffering happening in

cli/src/utils/proxy.cjs

Line 383 in 1ab07f0

responseData.push(data)

breaks websockets / event streaming, which HMR relies on.

I'll see how we can get this fixed.

[tinfoil-knight]

Verified that HMR is working using netlify-cli/v12.1.0 with gatsby/4.13.0 post the fix in #5200