[Bug]: Live Reload not working.

[drewkill32]

trafficstars

Which Remix packages are impacted?

• remix (Remix core)
• @remix-run/react
• @remix-run/serve

What version of Remix are you using?

1.1.3

What version of Node are you using? Minimum supported version is 14.

14.17.4

Steps to Reproduce

1. starting from the Quickstart template.
2. create a posts route.
3. navigate to route
4. the route does not show up

Every step along the way I have to restart the dev server to see the changes in the web. For example I added

export default function Posts() {
    const posts = useLoaderData();
    console.log('test3');
    return (
        <div>
            <h1>Posts</h1>
        </div>
    );
}

and the console still shows that it reloaded but still shows test2 (the value from when the dev server started)

Navigated to http://10.202.57.104:3000/posts index.tsx:18 test2 posts:23 💿 File changed: app\routes\posts\index.tsx posts:23 💿 Rebuilding... posts:23 💿 Rebuilt in 201ms posts:26 💿 Reloading window ... Navigated to http://10.202.57.104:3000/posts index.tsx:18 test2

I'm on Windows using Chrome(97.0.4692.71) and Edge(Version 97.0.1072.62), both failed

Expected Behavior

the hot reload should show the changes without having to restart

Actual Behavior

I have to stop the dev server and restart to see any changes

[jacob-ebey]

Check that the <LiveReload /> component is making it onto your page. If it's not, the first thing to check is what the value of NODE_ENV is when you run. If it's not "development", set it before you start the dev command.

[drewkill32]

The component is on the page. I just double-checked the NODE_ENV by adding <p>{process.env.NODE_ENV}</p> to the component and restarted the server. It is in development

[drewkill32]

I still have not found a solution other than it the hot-reloading it working on my Linux machine but refuses to work on Windows.

[kurdi-dev]

I'm also using Windows and I realized hot-reloads only work when I make changes inside the app directory of my Remix project. I don't know if this is how it is supposed to work or it's a bug!

[dan-cooke]

Same issue on MacOS. Nothing makes it work for me, even if i remove the process.env.NODE_ENV check around <LiveReload/>

I have reproduced the issue on 1.1.3 1.1.2 and 1.1.1 so downgrading does not appear to help.

I am using arc sandbox - so this may be affecting it.

Its dropped the Remix DX from a 10/10 down to a 1/10. I've had to put my project on hold until this is fixed. :(

All my components are inside the app directory

[adamhp]

I'm also using Windows and I realized hot-reloads only work when I make changes inside the app directory of my Remix project. I don't know if this is how it is supposed to work or it's a bug!

Interesting observation. I was struggling with this and your point made me realize I currently have all my components in a components/ folder outside of my app/ directory. I just did a brief experiment and moving a component into the app/ directory seems to fix it — i.e. causes changes to reflect on the hot reload live.

As a possible feature, could we provide paths to whatever is watching the filesystem for hot reload?

[seyaobey-dev]

In my case I have all my components inside the ./app folder. But hot-reload is still not work. I am on MacOS

[outmost]

I still have not found a solution other than it the hot-reloading it working on my Linux machine but refuses to work on Windows.

I hit the same problems, then realised that WSL was sat in the middle. Live Reload started working perfectly once I moved my working directory to the Linux filesystem. https://docs.microsoft.com/en-us/windows/wsl/setup/environment#file-storage

[nippur72]

same problem here on Windows and create-remix, I'm trying to follow the QuickStart tutorial but it doesn't reload 😢

[Tymek]

Live Reload started working perfectly once I moved my working directory to the Linux filesystem. https://docs.microsoft.com/en-us/windows/wsl/setup/environment#file-storage

It doesn't seem to work on my end, even though I have project files in \\wsl$\.... It doesn't work in WSL2 or Docker. I don't know if it's related, but I get an error in browser console:

react-dom.development.js:67 Warning: Did not expect server HTML to contain a <script> in <html>.
    at head
    at html
    at http://localhost:3000/build/_shared/chunk-ONGAJZNE.js:20292:45
    at App
    at RemixRoute (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:2492:3)
    at Routes2 (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:2475:7)
    at Router (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:287:15)
    at RemixCatchBoundary (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:1022:10)
    at RemixErrorBoundary (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:947:5)
    at RemixEntry (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:2372:12)
    at RemixBrowser (http://localhost:3000/build/_shared/chunk-ZOVL2M7D.js:3068:27)
    at ClientCacheProvider (http://localhost:3000/build/entry.client-SUATVO3Z.js:30:32)

[machour]

@Tymek the warning is unrelated, check #1077

[Tymek]

Thx.

FIY everybody, if you move to Remix Stack (Blues) there is no issue with hot reloading in WSL2. It is using pm2 server internally for that, AFAIK. That's what I did.

[mayank99]

Hot reload doesn't work for me on [email protected] with the starter templates. I'm on Windows with WSL2.

I dug a little deeper and found the root cause here: https://github.com/microsoft/WSL/issues/4739

This issue comes up across many tools, and the workaround is often to switch to polling.

• For example, chokidar provides the usePolling flag: https://github.com/paulmillr/chokidar#performance
• Vite also forwards the usePolling flag from chokidar for this exact reason: https://vitejs.dev/config/#server-watch
• esbuild watch mode uses polling by default: https://esbuild.github.io/api/#watch

Maybe remix should also offer a polling option?

[mikestopcontinues]

I don't mean to +1, but I'm also getting the issue on mac, with a fresh vercel/ts boilerplate.

[Devr-pro]

Same issue with me Am on Windows10 and all setup of remix was good but I then realized that My localhost isnt hotreloading on changes.., I have used this exp {process.env.NODE_ENV === 'development' ? <LiveReload/> : null} ..,But still my issue is persisting.

[kiliman]

They had started removing cross-env NODE_ENV=development from the package.json scripts. Due to the order in which things were occurring, the internal <LiveReload/> component wasn't getting the property environment.

Re-add the cross-env and it should work.

[mikestopcontinues]

@kiliman It doesn't work with or without manually setting NODE_ENV via CLI, .env, or in the config files. NODE_ENV is 'development' without any of them anyway.

[BiffBish]

Any known fixes? Running remix on WSL Ubuntu 20.04

[kiliman]

<LiveReload/> is a simple component. You can simply inline it in your root route.

export const LiveReload =
  process.env.NODE_ENV !== "development"
    ? () => null
    : function LiveReload({
        port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
      }: {
        port?: number;
      }) {
        let setupLiveReload = ((port: number) => {
          let protocol = location.protocol === "https:" ? "wss:" : "ws:";
          let host = location.hostname;
          let socketPath = `${protocol}//${host}:${port}/socket`;

          let ws = new WebSocket(socketPath);
          ws.onmessage = (message) => {
            let event = JSON.parse(message.data);
            if (event.type === "LOG") {
              console.log(event.message);
            }
            if (event.type === "RELOAD") {
              console.log("💿 Reloading window ...");
              window.location.reload();
            }
          };
          ws.onerror = (error) => {
            console.log("Remix dev asset server web socket error:");
            console.error(error);
          };
        }).toString();

        return (
          <script
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: `(${setupLiveReload})(${JSON.stringify(port)})`,
            }}
          />
        );
      };

[BiffBish]

<LiveReload/> is a simple component. You can simply inline it in your root route.

export const LiveReload =
  process.env.NODE_ENV !== "development"
    ? () => null
    : function LiveReload({
        port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
      }: {
        port?: number;
      }) {
        let setupLiveReload = ((port: number) => {
          let protocol = location.protocol === "https:" ? "wss:" : "ws:";
          let host = location.hostname;
          let socketPath = `${protocol}//${host}:${port}/socket`;

          let ws = new WebSocket(socketPath);
          ws.onmessage = (message) => {
            let event = JSON.parse(message.data);
            if (event.type === "LOG") {
              console.log(event.message);
            }
            if (event.type === "RELOAD") {
              console.log("💿 Reloading window ...");
              window.location.reload();
            }
          };
          ws.onerror = (error) => {
            console.log("Remix dev asset server web socket error:");
            console.error(error);
          };
        }).toString();

        return (
          <script
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: `(${setupLiveReload})(${JSON.stringify(port)})`,
            }}
          />
        );
      };

This doesn't seem to work? i start up the server and when i make a change to a document and do ctrl+s nothing happens int he console and the page doesn't recompile and build

[nilobarp]

Had the same issue. Fixed by changing remix.confix.js from:

module.exports = {
  ignoredRouteFiles: [".*"],
};

to:

module.exports = {
  cacheDirectory: "./node_modules/.cache/remix",
  ignoredRouteFiles: [".*", "**/*.css", "**/*.test.{js,jsx,ts,tsx}"],
};

[mikestopcontinues]

@nilobarp That's already in my remix.config.js. Why would it matter either way? My best guess is these "solutions" are all part of an elaborate April fools prank. 😁

[kiliman]

I believe there was a bug in the dev tool in that it wasn't passing the REMIX_DEV_SERVER_WS_PORT variable to the compiler. Have you tried the latest version? Remix now gets a random unused port for the WS port.

[nilobarp]

@mikeybinnswebdesign wish it was a prank. I tried everything mentioned in this thread, the only thing that worked was the change in remix.config.js. I undid the change reload stopped working, bring it back reload works again.

This is too much magic for my brain.

[mikestopcontinues]

@nilobarp @kiliman — Just figured out, for me it was disabling devServerPort which doesn't seem to be working anyway. Thanks!

[LukeXF]

LiveReload does not work for me,

I copied the code that @kiliman shared and added more console logs. The frontend never seems to connect to the WS server and is just constantly pending.

No ws.onmessage console.log is ever ran either.

Any suggestions?

[kiliman]

@LukeXF Are you on Mac or Windows?

Did you add/change devServerPort in remix.config?

Also check to see if REMIX_DEV_SERVER_WS_PORT environment variable is defined.

Worst case, just update your dev script to:

"cross-env NODE_ENV=development PORT=3000 REMIX_DEV_SERVER_WS_PORT=8002 remix dev"

Also, try to connect to the web socket server using your browser: http://localhost:8002

You should see the message "Upgrade Required"

[machour]

@drewkill32 is this issue fixed for you ?

[drewkill32]

Just tried again with the latest from remix. No it hasn't. If I run it on my Linux machine or Linux Subsystem for Windows the hot reload works.

[LukeXF]

I tried adding "cross-env NODE_ENV=development PORT=3000 REMIX_DEV_SERVER_WS_PORT=8002 remix dev" but I get:

Error: remix dev is not supported for custom servers. Because I'm using CF Pages in prod, anyway I removed the custom server: "./server.js" code and I get error: ReferenceError: crypto is not defined

{
  error: ReferenceError: crypto is not defined
  at createKey (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/cloudflare/crypto.js:35:13)
  at unsign (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/cloudflare/crypto.js:27:19)
  at decodeCookieValue (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/server-runtime/cookies.js:87:33)
  at Object.parse (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/server-runtime/cookies.js:53:66)
  at Object.getSession (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/server-runtime/sessions/cookieStorage.js:36:67)
  at loader (/Users/lukebrown/Projects/example/remix/app/root.tsx:145:39)
  at Object.callRouteLoader (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/server-runtime/data.js:77:20)
  at /Users/lukebrown/Projects/example/remix/node_modules/@remix-run/server-runtime/server.js:259:113
  at Array.map (<anonymous>)
  at handleDocumentRequest (/Users/lukebrown/Projects/example/remix/node_modules/@remix-run/server-runtime/server.js:259:67)
}

Then after installing I get: It appears you're using a module that is built in to node, but you installed it as a dependency which could cause problems. Please remove crypto before continuing. very odd! Didn't think I'd need to install crypto.

Anyway, I'm using node v16.13.0 on a Mac M1 Chip

REMIX_DEV_SERVER_WS_PORT is not used, but I have tried it, doesn't change anything, same with devServerPort, not using either at the moment.

http://localhost:8002/ still returns 404

I will investigate further on a clean project!