cli
cli copied to clipboard
V10 `dev` breaks React Fast Refresh on Gatsby sites
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
- Clone this minimal reproduction repo, and run
npm install
. - Run
npm start
to start thenetlify-cli
dev server. - Change something, like JSX, in
src/pages/index.js
. - Observe that it does not hot-reload in the browser.
- Browse to
http://localhost:8000
(the underlying Gatsby dev server). - Try again; observe that Fast Refresh is working fine.
- Downgrade to
netlify-cli@^9
. - Browse to
http://localhost:8888
(thenetlify-cli
dev server). - 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
Seeing exact same behavior on Windows/WSL2 since upgrading to v10 of Netlify CLI
I'm also experiencing this
Same issue here. gatsby develop
working as expected, but not netlify dev
In the meantime, installing [email protected]
as a dev dependency to your repo, then using yarn run netlify dev
seems to work.
Downgrading to [email protected]
and using ntl dev
worked for me.
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
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
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.
Is there any update on this? Not being able to use netlify-cli v10 with Gatsby is quite a bummer.
@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: https://github.com/netlify/cli/issues/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: https://github.com/netlify/cli/pull/4550
Specifically due to the changes under the proxy event listener for the proxyRes
event.
https://github.com/netlify/cli/blob/7a73873e14a050d04d929f348d45a9d275913132/src/utils/proxy.js#L333-L337
See the diff for the exact changes.
Note Reverting the changes done under the
proxyRes
event listener fixes the issue. Tested withv10.0.0
(first release containing the PR) & latest releasev12.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
.
https://github.com/netlify/cli/blob/7a73873e14a050d04d929f348d45a9d275913132/src/utils/proxy.js#L310-L320
cc: @danez
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.
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 https://github.com/netlify/cli/blob/1ab07f090dffaab8a0c2fa47beee89bc685f6c27/src/utils/proxy.cjs#L383 breaks websockets / event streaming, which HMR relies on.
I'll see how we can get this fixed.
Verified that HMR is working using netlify-cli/v12.1.0
with gatsby/4.13.0
post the fix in https://github.com/netlify/cli/pull/5200