React Scripts 3.3.0 breaks Heroku build

[thoughtassassin]

Describe the bug

I created a brand new app using:
npx create-react-app my-app

When I run the build adding NOTHING, I see this error:

SecurityError: The operation is insecure.

Did you try recovering your dependencies?

N/A

Which terms did you search for in User Guide?

I looked at the troubleshooting guide. None of the information is applicable.

Environment

Heroku

Steps to reproduce

1. npx create-react-app my-app
2. push the app to a github account
3. deploy that repo to Heroku

Expected behavior

The app should run

Actual behavior

Reproducible demo

https://cra-fails.herokuapp.com/

I think it may be related to this issue:

#8084

It looks like if I use react-scripts 3.2.0 it doesn't break. I am thinking based upon the issue published above it is the lines in webpackHotDevClient.js that changed from:

// Connect to WebpackDevServer via a socket.
var connection = new SockJS(
  url.format({
    protocol: window.location.protocol,
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

to:

// Connect to WebpackDevServer via a socket.
var connection = new WebSocket(
  url.format({
    protocol: 'ws',
    hostname: window.location.hostname,
    port: window.location.port,
    // Hardcoded in WebpackDevServer
    pathname: '/sockjs-node',
  })
);

You'll notice that the app loads if the protocol is http vs https:

http://cra-fails.herokuapp.com/

I think the protocol is messing it up.

[heyimalex]

You shouldn’t be deploying the development server to heroku in the first place.

[thoughtassassin]

You're right! I didn't change my npm start to run npm install -g serve && serve -s build. Heroku is so easy I forgot that you need to change the start script.

[heyimalex]

Glad you got it figured out! Sorry I was so curt. We should probably improve documentation here because it’s a pretty common problem.