CRA/react-scripts v5, Mac Monterey: Cypress component test crashes with error RangeError: Invalid WebSocket frame: RSV1 must be clear

Current behavior

This repo is using CRA & react-scripts v5 with a minimal Cypress 10 install. There is a simple component test that mounts the app.

On running the test, we get a crash on MacBook Pro, Mac Monterey 12.4, Intel Core i9.

To reproduce:

git clone https://github.com/muratkeremozcan/cra5-cy10-test.git
cd cra5-cy10-test
nvm use
yarn install
yarn cy:open-ct

Works in CI. Works if we downgrade react-scripts to v4, however that is a blocker for component test code coverage. More data here. TL, DR; with react-scripts 5, we cannot configure webpack (as in this commit) so that we can get coverage from component tests.

Desired behavior

Component test do not crash on Mac Montery, with a repo using react-scripts v5.

More desired behavior is code coverage being included with component testing, as it used to be long time ago in the past.

Test code to reproduce

https://github.com/muratkeremozcan/cra5-cy10-test

git clone https://github.com/muratkeremozcan/cra5-cy10-test.git
cd cra5-cy10-test
nvm use
yarn install
yarn cy:open-ct

Cypress Version

10.3.0

Other

No response

[marktnoonan]

@muratkeremozcan I gave this a shot and couldn’t reproduce either on my machine, how did you get on with @ZachJW34’s suggestion?

[ZachJW34]

I couldn’t find any issues relating to webpack (and couldn’t reproduce this issue myself), but it has to be related since you said downgrading to cra4 fixed this. I did find a similar issue with Snowpack. Can you try overwriting your port to use something other than port 8080 (which is the default)? The config would look something like this:

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  component: {
    devServer: {
      framework: "create-react-app",
      bundler: "webpack",
      webpackConfig: {
        devServer: {
          port: 3000,
        },
      },
    },
  },
});