LiveReload - Indefinite loop in Firefox

[Vivalldi]

What version of Remix are you using?

v1.7.6

Steps to Reproduce

1. create-remix using defaults
2. Add a loader to app/routes/index.tsx that sleeps for 1 second
3. Open http://localhost:3000 in Firefox Developer Edition (I'm using 108.0b6 (64-bit) macOS silicon)
4. Make a change to the file to cause remix rebuild while the firefox window is in view (focus state doesn't seem to matter)
5. Page continually reloads until window is no longer in view (focus state doesn't seem to matter)

export const loader: LoaderFunction = async () => {
        await new Promise((resolve) => setTimeout(resolve,1000));
        const data = { key: "value" };
        return json(data);
}

Expected Behavior

The page should only live reload once

Actual Behavior

The page reloads in a looping manner. Normal behavior can be observed in chrome or by removing the sleeping timeout.

[seldo]

I have been banging my head against a wall for 24 hours about why my OAuth 2 flow doesn't work and the reason is this bug. My login flow reloads infinitely in Firefox but works as expected in Chrome. Full repro is at this commit: https://github.com/seldo/alpaca/tree/ae5270fe728e0cef05119e0fe650a305ad79c24b

import { useLoaderData, Form } from "@remix-run/react";
import authenticator from "../../services/auth.server";

export let loader = async ({request}) => {

  let user = await authenticator.isAuthenticated(request)
  if( user ) {
    console.log("Login says: authenticated!")
    console.log(user)
    return user
  } else {
    console.log("Login says: not authenticated")
    console.log(user)
    return false
  }

}

export default function Login() {
  let user = useLoaderData()
  if(user) {
    return (
      <div>You are logged in!!!</div>
    )  
  } else {
    return (
      <div>
        <Form method="get" action="/auth/mastodon">
          <button>Login</button>
        </Form>
      </div>
    )   
  }
}

[seldo]

After further digging I think this might be a result of an existing issue with LiveReload: #2997 but I'm not sure.

[ryanflorence]

I don't even have to change a file, just the initial load in firefox makes it trip up.

[ryanflorence]

Alright, soon as the tests pass we'll merge that PR and then the fix will be available in the nightly releases until the next official release goes out next week.

So you can either wait for the nightly tonight, wait for next week, or copy/paste this and use it instead:

copy/paste this

export const LiveReload =
  process.env.NODE_ENV !== "development"
    ? () => null
    : function LiveReload({
        port = Number(process.env.REMIX_DEV_SERVER_WS_PORT || 8002),
        nonce = undefined,
      }: {
        port?: number;
        /**
         * @deprecated this property is no longer relevant.
         */
        nonce?: string;
      }) {
        let js = String.raw;
        return (
          <script
            nonce={nonce}
            suppressHydrationWarning
            dangerouslySetInnerHTML={{
              __html: js`
                function remixLiveReloadConnect(config) {
                  let protocol = location.protocol === "https:" ? "wss:" : "ws:";
                  let host = location.hostname;
                  let socketPath = protocol + "//" + host + ":" + ${String(
                    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.onopen = () => {
                    if (config && typeof config.onOpen === "function") {
                      config.onOpen();
                    }
                  };
                  ws.onclose = (event) => {
                    console.log("Remix dev asset server web socket closed. Reconnecting...");
                    if (event.code === 1006) {
                      setTimeout(
                        () =>
                          remixLiveReloadConnect({
                            onOpen: () => window.location.reload(),
                          }),
                        1000
                      );
                    }
                  };
                  ws.onerror = (error) => {
                    console.log("Remix dev asset server web socket error:");
                    console.error(error);
                  };
                }
                remixLiveReloadConnect();
              `,
            }}
          />
        );
      };

[massimopalmieri]

I'm on v1.8.0 and I'm still getting this issue, only on Firefox on the initial page load, without making any file change

[seldo]

I think I've seen it once or twice since upgrading to 1.8, also on Firefox, but I've had trouble reproducing.

[machour]

The PR was merged after 1.8 was cut, fix will be available in next release.

Re-opening this issue until then to avoid confusion.