Sitecore / jss

Software development kit for JavaScript developers building web applications with Sitecore Experience Platform
https://jss.sitecore.com
Apache License 2.0
261 stars 275 forks source link

HMR is not working #1813

Closed mg-aceik closed 1 month ago

mg-aceik commented 5 months ago

Describe the Bug

Hot Module Reloading described here https://nextjs.org/docs/app/api-reference/next-cli#development is not working

Console logs repeatedly: WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed:

Also the whole window refreshes itself every minute or so.

To Reproduce

  1. npx create-sitecore-jss nextjs,nextjs-sxa,nextjs-multisite,nextjs-xmcloud
  2. npm run start:connected

Expected Behavior

No console logs about websocket.ts:77 WebSocket connection to 'ws://localhost:3000/_next/webpack-hmr' failed: and hmr is working when you edit a component and save.

Possible Fix

No response

Provide environment information

georgechang commented 5 months ago

As another data point, the exact same thing happens for me in 21.7.1 as well. Not sure if this is because of a scheme mismatch between the head app and Sitecore or something else.

Davy803 commented 5 months ago

Got a note that downgrading to NextJS 13 instead of 14 resolved the issue, so potentially some conflict with a change in NextJS?

illiakovalenko commented 4 months ago

@mg-aceik, @georgechang - can you, please, provide more information in order to reproduce this issue? For me it's not reproducible:

  1. Your node.js / npm version
  2. SSG / SSR
  3. REST / GraphQL
  4. More information about customizations
mg-aceik commented 4 months ago

Hi @illiakovalenko Sitecore support ticket was able to repro with public ref 615521.

  1. Node 20.11.1 npm 10.2.4
  2. SSG
  3. GraphQL
  4. No customisations
yavorsk commented 3 months ago

Hi @mg-aceik , @georgechang , @Davy803 This seems to be a nextjs bug. Here is a link to the same problem in their public repo: https://github.com/vercel/next.js/issues/63820. I also verified it with a clean nextjs app. We'll contact vercel to try and escalate this. Since the problem apparently is connected with assetPrefix, as a workaround, during development, you might try to set assetPrefix to empty string in next.config.js https://github.com/Sitecore/jss/blob/5f22d4570819ce04e88de284d52a0d5076c73910/packages/create-sitecore-jss/src/templates/nextjs/next.config.js#L11 . The downside of this is that editing host might not load static assets properly (if it is also running in connected/development mode). Here is more info: https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix, https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/next-js-for-xm-cloud-environment-variables.html (see info for PUBLIC_URL). In the described scenario above, the workaround should work fine.

thezaff commented 3 months ago

Hi @mg-aceik , @georgechang , @Davy803 This seems to be a nextjs bug. Here is a link to the same problem in their public repo: vercel/next.js#63820. I also verified it with a clean nextjs app. We'll contact vercel to try and escalate this. Since the problem apparently is connected with assetPrefix, as a workaround, during development, you might try to set assetPrefix to empty string in next.config.js

https://github.com/Sitecore/jss/blob/5f22d4570819ce04e88de284d52a0d5076c73910/packages/create-sitecore-jss/src/templates/nextjs/next.config.js#L11

. The downside of this is that editing host might not load static assets properly (if it is also running in connected/development mode). Here is more info: https://nextjs.org/docs/app/api-reference/next-config-js/assetPrefix, https://doc.sitecore.com/xmc/en/developers/jss/latest/jss-xmc/next-js-for-xm-cloud-environment-variables.html (see info for PUBLIC_URL). In the described scenario above, the workaround should work fine.

Had the same issue in March and was blaming jss sdk for some reason, but yes, it occured to be next.js issue :) Setting assetPrefix only for prod build, and no prefix for dev has solved the problem for me at that moment.

yavorsk commented 3 months ago

Hi @mg-aceik , @georgechang , @Davy803, @thezaff , quick update on this, - vercel are working on the problem : https://github.com/vercel/next.js/pull/67983

illiakovalenko commented 1 month ago

@mg-aceik I closed the ticket, since the issue is fixed on Next.js side and released as a part of 14.2.7