Experience Editor webpack-hmr error

[coreyasmith]

Describe the Bug

The following error is shown in the Firefox console in the Experience Editor repeatedly:

Firefox can’t establish a connection to the server at wss://localhost:3000/_next/webpack-hmr. The connection to wss://localhost:3000/_next/webpack-hmr was interrupted while the page was loading.

And in Chrome:

GET http://localhost:3000/_next/webpack-hmr 404 (Not Found) GET http://localhost:3000/_next/webpack-hmr 404 (Not Found)

To Reproduce

1. Install a new instance of Sitecore 10.3 (XP) in IIS.
2. Create a new JSS Next.js application.
3. Import JSS Styleguide into Sitecore 10.3 instance.
4. Open Experience Editor.
5. Open console and observe error.

Expected Behavior

No webpack-hmr errors are thrown in Experience Editor with a fresh install.

Possible Fix

None, but the proposed CORS fix from #1485 did not have any effect.

Provide environment information

• Sitecore Version: 10.3 with Sitecore Headless Services Server XP 21.0.587
• JSS Version: 21.1.5
• Browser Name and version: Firefox, 113.0.1
• Operating System and version (desktop or mobile): Windows 11
• Link to your project (if available):

[ambrauer]

Hi @coreyasmith - Can you check that you are using http:\\localhost:3000 for the next.config.js assetPrefix (by default this originates from the PUBLIC_URL environment variable)?

Latest versions of Next.js should derive the websocket protocol from this if set. In this case, I would expect the websocket connection to be ws://localhost:3000/_next/webpack-hmr which should succeed.

[coreyasmith]

Hi @coreyasmith - Can you check that you are using http:\\localhost:3000 for the next.config.js assetPrefix (by default this originates from the PUBLIC_URL environment variable)?

Latest versions of Next.js should derive the websocket protocol from this if set. In this case, I would expect the websocket connection to be ws://localhost:3000/_next/webpack-hmr which should succeed.

@ambrauer yes, I've not made any changes to next.config.js which sets assetPrefix to the result of getPublicUrl from @sitecore-jss/sitecore-jss-nextjs.

I think the browser is trying to use wss:// instead of ws:// because Sitecore is running on https.

[ambrauer]

@coreyasmith Got it, thanks for confirming. I've added this to our backlog to investigate further.

[stale[bot]]

This has been automatically marked as stale because it has not had recent activity. It will be closed if there is no further activity within 30 days. You may add comments or the 'keep' label to prevent it from closing. Thank you for your contributions.