search

react-workspaces / react-workspaces-playground

⚛️ 🐈 Zero Config Create-React-App Monorepos with Yarn Workspaces, Lerna and React Storybook.
https://react-workspaces.github.io/react-workspaces-playground/
764 stars 128 forks source link

Setting HTTPS=true breaks HMR #54

Open royledford opened 4 years ago

royledford commented 4 years ago

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

royledford commented 4 years ago

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