#LiveReload having websocket connection issues / WSL + Firefox

1 messages · Page 1 of 1 (latest)

tall folio
#

Hi all. I'm just getting started with a fresh project, which I created using the default template. I added a bit of CSS and a links function to my root.tsx, but then noticed that my updates didn't seem to be showing up on my dev server. I'm running the server via npm run dev, and I haven't changed any configuration.

One other thing that I noticed: the dev server is very slow to start! I'm not sure if this is related. Here's my system info:

$ uname -a
Linux DESKTOP-K5C7VS9 5.15.90.1-microsoft-standard-WSL2 #1 SMP Fri Jan 27 02:56:13 UTC 2023 x86_64 x86_64 x86_64 GNU/Linux

Here are the contents of my package.json file.

{
  "private": true,
  "sideEffects": false,
  "scripts": {
    "build": "remix build",
    "dev": "remix dev",
    "start": "remix-serve build",
    "typecheck": "tsc"
  },
  "dependencies": {
    "@remix-run/node": "^1.14.3",
    "@remix-run/react": "^1.14.3",
    "@remix-run/serve": "^1.14.3",
    "isbot": "^3.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^1.14.3",
    "@remix-run/eslint-config": "^1.14.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.8",
    "eslint": "^8.27.0",
    "typescript": "^4.8.4"
  },
  "engines": {
    "node": ">=14"
  }
}

I'm running current node stable: $ node --version v19.8.1

Any ideas how I might debug this issue?

flint radish
#

I know at one point there was an issue with LiveReload and firefox but it was an infinite reload issue for routes that took longer than a second or so to load (not a production issue just dev)

tall folio
#

I do. Here is the default export:

  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
      </head>
      <body>
        <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}```
flint radish
#

when you save a file while the server is running do you see a "rebuilt in {x}ms"?

tall folio
#

(here's the error in the FF console)

image.png
flint radish
#

last question, you're using WSL-2 to dev right? so like a virtual linux box? is it passing the connection to port 8002?

#

the app gets served on 3000 and the LiveReload needs a different port to make reload happen

#

so my only thought would be somehow your WSL2 isnt allowing the communication

#

Hopefully that is the issue and points in the direction to get it fixed. Sadly I don't know WSL-2 I just know that virtual machines have a lot of problems passing ports to one another and microsoft has been trying their best to make it work well, but I wouldn't doubt issues still existing

tall folio
#

that's a good question! i'm relatively new to windows (enjoying it, as an aside), but i don't see anything running on port 8002

#

i'll try just from the windows shell rather than WSL

tall folio
#

This worked from Powershell. I had to install new versions of node (Windows didn't see the WSL version)

flint radish
#

Rough, I know Microsoft tries to make it feel like it’s all one computer as best they can. But those port issues can be tough to make happen

#

Glad you got something working though!