react-workspaces-playground icon indicating copy to clipboard operation
react-workspaces-playground copied to clipboard

Published 20 hours ago • verified publisher icon react-workspaces

Setting HTTPS=true breaks HMR

Open royledford opened this issue 5 years ago • 1 comments

When instructing CRA apps to use https for dev server hot module reloading stops working.

To reproduce:

  1. Clone this repo
  2. Switch to repo folder
  3. run yarn in folder to install dependencies
  4. update ./packages/apps/app-multi-comps/package.json start script to "start": "HTTPS=true react-scripts start"
  5. Once app is running in browser, change any file in that app

expected results: App would update and show changes

actual results: App does not update until manually refreshed

I also tried

  • Adding HTTPS=true in a .env file
  • Adding HTTPS=true as an os level environment variable

royledford avatar Jun 08 '20 16:06 royledford

In case anyone else is looking for this, I've solved it with a temporary workaround.

The issue is the websocket connect for reloading is not using wss protocol.

Update line 62 in node_modules/@react-workspaces/react-scripts/node_modules/react-dev-utils/webpackHotDevClient.js to the following:

protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',

This was updated in the create-react-app repo but it doesn't seem react-workspaces has been updated to use it. See And this CRA update https://github.com/facebook/create-react-app/pull/8079/files#diff-5166b8ed2c51bdab6a247a95b14ff595R62

royledford avatar Jul 23 '20 17:07 royledford