Hot module reloading with proxy not working in Firefox but works in Chrome

[andygock]

Hi,

When developing using create-react-app in Firefox 66.0.1, hot module reloading isn't working, and I get this error in console when using npm run start:

The connection to ws://localhost:3000/sockjs-node/800/q2e1i5qh/websocket was interrupted while the page was loading. websocket.js:7

This doesn't happen in Chrome, and HMR works there as expected. I didn't have problems in the past with Firefox, I'm not sure if it's triggered by a Firefox update, or new versions of react-scripts. It may even be specific to my app.

I'm using react-scripts versions 2.1.8

Does anyone know what would cause this, and how I could get HMR working again? I'm not really sure where to look.

Thanks

[andygock]

@andygock what version of create-react-app are you using?

@Jbonez87
I'm using version 2.1.8

[Jbonez87]

@andygock I'm not able to reproduce this error using npm run start or yarn start. What version of npm are you using? I'm using this version:

npm -v
6.9.0

[Developerayo]

@andygock this is happening because you did close your open WebSocket. Try closing them socket.close(); and retry.

[andygock]

@andygock this is happening because you did close your open WebSocket. Try closing them socket.close(); and retry.

@Developerayo Where and how should I do this in a create-react-app project? I'm not using any WebSocket in my app itself, so I'm guessing the sockets are part of the HMR implementation.

[jayenashar]

i started a new project yesterday, and i know it was working yesterday. react-scripts 2.1.8, yarn 1.12.3, node v8.15.1. i see firefox updated a few hours ago, so i'm going to blame firefox 66.0.2 for this one (had 66.0.1 yesterday)

[Jbonez87]

@jayenashar it could be webpack-dev-server too. Note that devDependencies in its package.json:

"devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "babel-loader": "^8.0.5",
    "copy-webpack-plugin": "^5.0.0",
    "css-loader": "^2.1.0",
    "eslint": "^5.4.0",
    "eslint-config-prettier": "^4.0.0",
    "eslint-config-webpack": "^1.2.5",
    "eslint-plugin-import": "^2.9.0",
    "eslint-plugin-prettier": "^3.0.1",
    "execa": "^1.0.0",
    "file-loader": "^3.0.1",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.0.6",
    "husky": "^1.3.1",
    "jest": "^24.3.1",
    "jquery": "^3.2.1",
    "less": "^3.7.1",
    "less-loader": "^4.1.0",
    "lint-staged": "^8.1.1",
    "marked": "^0.6.1",
    "nyc": "^13.3.0",
    "prettier": "^1.16.3",
    "puppeteer": "^1.12.2",
    "rimraf": "^2.6.2",
    "standard-version": "^5.0.0",
    "style-loader": "^0.23.1",
    "supertest": "^3.0.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.29.0",
    "webpack-cli": "^3.2.1",
    "ws": "^6.0.0" // websockets included here
  },

[Jbonez87]

@andygock I think this is an issue with ws and webpack-dev-server, not create-react-app itself. I would open a bug ticket on ws and on webpack-dev-server

[jayenashar]

i didn't update any node modules between yesterday and today. the only thing i can think of that has changed is firefox.

[Jbonez87]

@jayenashar it doesn't look there were any javascript changes here in the latest version of Firefox: Firefox changelog

If you still think the issue is with Firefox, it might be more beneficial to create a bug ticket here: Bugzilla

[andygock]

I just did some experiments:

Firefox 60.6.1 ESR - works okay

Firefox 66.0.2 - websocket error

Clean PortableApps install, no add-ons or extensions.

On creating a blank project using e.g npx create-react-app test - no problems in both browsers. There may be something going on with my app as well I think. Can't pin point it or have any clue of where to start debugging.

[Jbonez87]

@andygock I know in the past create-react-app has had issues when using npm and npx (the one that comes to mind for me is "Cannot resolve module 'chalk'"). Just as a sanity check, could you try starting your app with yarn? What OS are you using? You can install yarn with homebrew if you don't have it already

[jvmiert]

On creating a blank project using e.g npx create-react-app test - no problems in both browsers. There may be something going on with my app as well I think. Can't pin point it or have any clue of where to start debugging.

I'm having the same issue. Everything works fine in Chrome but in Firefox:

The connection to ws://localhost:3000/sockjs-node/698/osuont4q/websocket was interrupted while the page was loading. websocket.js:7

Clean create-react-app works fine. Could there be something wrong in the upgrade process?

Update:
I'm using Found for routing. In my app I do a redirect from "/". When I remove this redirect the dev server does not disconnect. But only if I navigate to "/". Any other route still has the same error.

[jayenashar]

i'm not using any extra packages.

i have found that oddly it works the first time, but not again until i restart firefox.

[jvmiert]

i have found that oddly it works the first time, but not again until i restart firefox.

Yeah on closer inspection it might not be related to the redirect. Sometimes it works and sometimes it doesn't but I can't seem to find a pattern to when it works.

Firefox 60.6.1 ESR - works okay

Just tested this and can confirm this release has no issues.

[xumix]

socketio/socket.io#2016 (comment)
looks like some ip/hostname issues?