Heroku Cannot Serve Files due to Insecure Websockets

[SydBal]

Issue

The following error is thrown in the browser once the application is served via heroku:

×
SecurityError: Failed to construct 'WebSocket': An insecure WebSocket connection may not be initiated from a page loaded over HTTPS.
./node_modules/react-dev-utils/webpackHotDevClient.js
node_modules/react-dev-utils/webpackHotDevClient.js:60
__webpack_require__
/app/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;
View compiled
fn
/app/webpack/bootstrap:150
  147 | 		);
  148 | 		hotCurrentParents = [];
  149 | 	}
> 150 | 	return __webpack_require__(request);
      | ^  151 | };
  152 | var ObjectFactory = function ObjectFactory(name) {
  153 | 	return {
View compiled
1
https://react-app-test-sydbal.herokuapp.com/static/js/main.chunk.js:355:1
__webpack_require__
/app/webpack/bootstrap:785
  782 | };
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;
View compiled
checkDeferredModules
/app/webpack/bootstrap:45
  42 | 	}
  43 | 	if(fulfilled) {
  44 | 		deferredModules.splice(i--, 1);
> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);
     | ^  46 | 	}
  47 | }
  48 | 
View compiled
Array.webpackJsonpCallback [as push]
/app/webpack/bootstrap:32
  29 | 	deferredModules.push.apply(deferredModules, executeModules || []);
  30 | 
  31 | 	// run deferred modules when all chunks ready
> 32 | 	return checkDeferredModules();
     | ^  33 | };
  34 | function checkDeferredModules() {
  35 | 	var result;
View compiled
(anonymous function)
https://react-app-test-sydbal.herokuapp.com/static/js/main.chunk.js:1:91
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

Requirements

This error should not be throwing.

NOTE: It also looks like it's hot-module-replacement which is causing this error. This is caused by the development build being pushed by Heroku. Heroku should be serving the production build

[SydBal]

[#8075][create-react-app] is a potential solution.

[SydBal]

This is not an issue for this project. Will be closing the issue and opening a new one for getting the app working on Heroku.