HMR is not working

[mg-aceik]

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

• Sitecore Version: XM Cloud
• JSS Version: 22.0.0
• Browser Name and version: Chrome latest
• Operating System and version (desktop or mobile): Windows 11
• Link to your project (if available): n/a

[georgechang]

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]

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

[illiakovalenko]

@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]

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]

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]

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]

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