Remix dev asset server web socket error

[gonghaibo]

What version of Remix are you using?

1.4.1

Steps to Reproduce

1.npm i create-remix mydemo
2.remix dev
3.Modify or add files in routes
4.chrome error(Remix dev asset server web socket error:)

Expected Behavior

Automatically refresh the page to match the new route.
To fix this I had to reboot.

Actual Behavior

[Klukies]

Hey, I had the same issue.

Deleting my package-lock & node_modules however, fixed the issue for me. Hope this is the case for you as well!

[gonghaibo]

Hey, I had the same issue.

Deleting my package-lock & node_modules however, fixed the issue for me. Hope this is the case for you as well!

#1601
Thanks, but your workaround didn't work for me. I found a similar question.

[TimoWestland]

Been having this issue as well since upgrading to v1.4.3. Re-installing dependencies did not work for me either.

[sillypoise]

Same bug has been happening to me as well since v1.4.3. Can reproduce the bug just as OP described.

[WesleyKapow]

So I believe the issue is that for some reason LiveReload is using a randomly generated port number when remix builds. For me, it'll work for a while but then when I introduce a compile bug and fix it, this triggers a new random number and I get a mismatch between the port actually being used and the one LiveReload is trying to connect to.

It looks like Remix is not respecting devServerPort, nor REMIX_DEV_SERVER_WS_PORT and not actually using the default port of 8002 as the docs outline.

My work around is to use <LiveReload port={8002}/>

[leimantas]

I have same problem.
Latest Safari. No extensions.
After reloading vscode - it works for some time.

[github-actions]

🤖 Hello there,

We just published version v1.5.0-pre.1 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[MichaelDeBoey]

Closed by #3206

[github-actions]

🤖 Hello there,

We just published version v1.5.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[apisandipas]

Hello, I am on 1.5.1 and I'm getting this exact issue. I am running Firefox 100.1 with all extensions disabled.

[xanderberkein]

For anyone still having this issue after 1.5.0, try adding

devServerPort: 8002

to remix.config.js.

[nicholaschiang]

@xanderberkein could you put that into all of the Remix stacks configurations? I ran into this issue when using the Blues stack...

[Vikaskumargd]

issue is still there

[decanTyme]

For anyone still having this issue after 1.5.0, try adding

devServerPort: 8002

to remix.config.js.

Thanks, this worked wonders with #2485, getting really tired manually reloading for every change (even on 1.5.1). Though I'm confused, this should be reopened and fixed internally, right? Because the TS docs on devServerPort is kinda misleading the way it is if we had to be explicit everytime.

[kiliman]

Yes this is an issue with templates that don’t use Remix App Server. Because remix watch and Express are separate processes they don’t share the REMIX_DEV_SERVER_WS_PORT environment variable that defines the random port used by Remix. The solution is to hard code the port in remix.config

See the following issue for more detail.

#3314

[kmocorro]

Adding to remix.config.js solves the issue.
devServerPort: 8002,

I wonder why all of a sudden LiveReload doesn't work whilst the app was still working prior refactoring the code to components structure.

[russc]

In addition to @kmocorro's comment about devServerPort, if you are using netlify dev some of the default exports in remix.config.js get commented out. Uncommenting them fixed this issue for me.

[hakimLyon]

Thanks, for me this issue fixed on v1.5.1 💯.

[bursteways]

I had a CORS plugin that was enabled. Turning this OFF allowed the websocket to LiveReload again.

[TreyOverton]

I am adding this comment well after a generally accepted solution just in case the following is the actual problem for some people who are still struggling.

One of the devs on my team was experiencing this error with Remix v1.18, even when setting up a fresh Remix app. Nobody else on the team seemed to have this issue. All the various solutions suggested did not work. One difference was that he was on Windows 10 while everyone else was on Windows 11.

We finally discovered this article:
https://blog.deanosim.net/windows-10-winnat-and-why-your-programs-cant-listen-on-certain-ports/

He followed the advice, which I replicate here in case the link goes away.

After many hours of research I discovered the Wonders of Windows NAT Driver (WINNAT) and that in a Windows update in 2018 they snuck in a feature that allows WINNAT to reserve ports for Windows use (even if Windows 10 isn't actually using them) so that no other programs on your computer can use these ports.

Then use these commands to stop WINNAT, exclude port 8002 from being secretly reserved, restart WINNAT. This is apparently durable such that after reboot, the protection from Windows reserving the port remains.

net stop winnat

netsh int ipv4 add excludedportrange protocol=tcp startport=8002 numberofports=1

net start winnat

If you are using a port other than 8002, use that instead. If the random ports sometimes get blocked and sometimes not, it could be you are running up against some reserved ports. Locking in port 8002 and then doing this would presumably solve it.

This may not be the solution generally, but it is what we found explicitly worked along with a clear reason why. Best of luck!

[mildrenben]

For anyone running into this in 2023, the devServerPort in remix.config.js was renamed. You should now use:

module.exports = {
  ...otherConfig,
  dev: {
    port: 8002
  }
};

[YuraGB]

Ok. guys.
My project uses this package.json:

"dependencies": { "@nextui-org/react": "^2.1.13", "@prisma/client": "^5.4.2", "@remix-run/css-bundle": "^2.0.1", "@remix-run/express": "^2.1.0", "@remix-run/node": "^2.0.1", "@remix-run/react": "^2.0.1", "@remix-run/serve": "^2.0.1", "bcryptjs": "^2.4.3", "compression": "^1.7.4", "cors": "^2.8.5", "express": "^4.18.2", "framer-motion": "^10.16.4", "isbot": "^3.6.8", "morgan": "^1.10.0", "react": "^18.2.0", "react-dom": "^18.2.0", "remix": "^2.1.0", "remix-auth": "^3.6.0", "remix-auth-form": "^1.4.0", "socket.io": "^4.7.2" }, "devDependencies": { "@remix-run/dev": "^2.0.1", "@remix-run/eslint-config": "^2.0.1", "@types/bcryptjs": "^2.4.4", "@types/react": "^18.2.20", "@types/react-dom": "^18.2.7", "@types/socket.io-client": "^3.0.0", "cross-env": "^7.0.3", "eslint": "^8.38.0", "nodemon": "^3.0.1", "prisma": "^5.4.2", "socket.io-client": "^4.7.2", "tailwindcss": "^3.3.3", "typescript": "^5.1.6" },

I don't use any dev ports in remix-config
I don't use any port prop in <LiveReload /> component.
I don't use "remix watch" command because it's hard to catch what port it will be using if 3000 will be not available
You must understand that almost all examples of remix + socket io in Internet are old and uses outdated version of packages
So, you need to configure the io server

const io = new Server(httpServer, { transports: [ 'polling', ], cors: { origin: "http://localhost:3000", credentials: true, }, });

origin: "http://localhost:3000", -> it's yours website

[deadcoder0904]

any solutions for docker?

edit: found a solution :)

[pedro-novo]

If you're using Remix with Vite just remove the <LiveReload /> component from the root.tsx