LiveReload not working

[dchadcluff]

Setup a new project today following the readme but as I make changes in the app I'm not getting updates in the browser on localhost.

💿 File changed: app/routes/users+/$username.tsx 💿 Rebuilding... 💿 Rebuilt in 717ms Waiting for app server (47fa8b37)

[gelouko]

It happened to me, too.

At first, I thought this could be some problem with the current remix version (https://github.com/remix-run/remix/issues/1601), but when I created a new project using just Remix, the hot reloading worked fine

I tried to run the project with npx remix dev and the hot reload worked fine. I'm new to Remix, so not sure what could be changed to fix this.

In the package.json I tried to remove the --ignore options for app and build in the dev:server script but it didn't work

[andre-wells]

New to remix and following the tutorial. npm run dev doesn't reload new routes but does load changes to an existing component.

I've found this problem exists in Windows but not when using linux on WSL2

[lauritzsh]

It's not working for me still unfortunately. I've tried to checkout various commits to see if there was a regression at some point, but couldn't find anything that broke this behavior. I did the following

$ npx create-remix@latest --typescript --install --template epicweb-dev/epic-stack my-project
$ cd my-project
$ npm run setup # just for good measure
$ npm run dev

> dev
> remix dev -c "npm run dev:server" --no-restart

Loading environment variables from .env
💿 Building...
💿 Built in 1.2s
Waiting for app server (4dafb7f3)
> npm run dev:server
Remix dev server ready

> dev:server
> cross-env MOCKS=true tsx watch --clear-screen=false --ignore "app/**" --ignore "build/**" --ignore "node_modules/**" ./index.js

🔶 Mock server installed
🚀  We have liftoff!
Local:            http://localhost:3000
On Your Network:  http://10.20.10.26:3000
Press Ctrl+C to stop
GET /login 200 - - 21.167 ms

The server is running and I can access the pages. However, when I make a change I see

💿 File changed: app/routes/_auth+/login.tsx
💿 Building...
💿 Rebuilt in 524ms
Waiting for app server (6771c388)

but I have to manually refresh the page to see the change. There are no console errors and the socket receives messages on change. The messages also gets printed to the browser's console log.

[onemen]

@lauritzsh, I can not reproduce this

💿 File changed: app\routes\_auth+\login.tsx
💿 Rebuilding...
💿 Rebuilt in 2.1s
Waiting for app server (cfe68ca1)
App server took 223ms
> HMR

what did you changed on app/routes/_auth+/login.tsx?

[lauritzsh]

@onemen I forgot to mention that I'm on macOS if that makes a difference. I noticed your path is different so I assume you're on Windows. The change is a removed word from the heading.

diff --git a/app/routes/_auth+/login.tsx b/app/routes/_auth+/login.tsx
index bbd1601..9d7a6be 100644
--- a/app/routes/_auth+/login.tsx
+++ b/app/routes/_auth+/login.tsx
@@ -42,7 +42,7 @@ export default function LoginPage() {
        <div className="flex min-h-full flex-col justify-center pb-32 pt-20">
            <div className="mx-auto w-full max-w-md">
                <div className="flex flex-col gap-3 text-center">
-                   <h1 className="text-h1">Welcome back!</h1>
+                   <h1 className="text-h1">Welcome!</h1>
                    <p className="text-body-md text-night-200">
                        Please enter your details.
                    </p>

[onemen]

first just to be safe check if npm ci + npm run setup again help.

check this code, the watcher need to call reloadBuild each time the file build/index.js changed by remix https://github.com/epicweb-dev/epic-stack/blob/5a6875cfd5af7fcc22e63e8ab194d5c7ac36143f/server/index.ts#L167-L178

1. try to add console.log in it to verify it is call
2. look in your file system for the file build/index.js and make sure it was updated after you change the login.tsx
3. add log after broadcastDevReady(devBuild) at the end of reloadBuild function.

report your finding back

[lauritzsh]

I'm a moron. I forgot I had something running on :3001 which seems to have received the requests from the Remix server. My bad @onemen, thanks for helping out though.

[gertie-sheshe]

New to remix and following the tutorial. npm run dev doesn't reload new routes but does load changes to an existing component.

I've found this problem exists in Windows but not when using linux on WSL2

New to Remix as well and following the tutorial and live reloading not working on my end as well. I am on MacOS. Tried switching to npx remix dev still nothing. I have to manually refresh the page to see changes.

[reddygtvs]

New to remix and following the tutorial. npm run dev doesn't reload new routes but does load changes to an existing component. I've found this problem exists in Windows but not when using linux on WSL2

New to Remix as well and following the tutorial and live reloading not working on my end as well. I am on MacOS. Tried switching to npx remix dev still nothing. I have to manually refresh the page to see changes.

Want to add to this, I'm having a similar issue. (hot reloading does not work on "npm run dev".) I'm also on macOS, but I'm running "just the basics" setup, and following along the remix jokes tutorial. Npx remix dev works, but I'm happy to give more information from my end to fix this since it might turn off newcomers away (I almost gave up myself).