Making changes to the entry.client.tsx file appears to break live reload / hmr for Remix v2.0.1 #156

drinkcoffee101 · 2023-10-10T20:48:23Z

drinkcoffee101
Oct 10, 2023

After making the recommended changes to entry.client.tsx and entry.server.tsx live reload + hmr appears to no longer work (translation are working though!). I tried replacing the code in entry.client.tsx with what was originally there and live reload + hmr seemed to work again. Do I just need to wait for remix v2.0.1 support?

entry.client.tsx

async function hydrate() {
  await i18next
    .use(initReactI18next)
    .use(LanguageDetector) 
    .use(Backend) 
    .init({
      ...i18n, 
      ns: getInitialNamespaces(),
      backend: { loadPath: "./i18n/locales/{{lng}}/{{ns}}.json" },
      detection: {
        order: ["htmlTag"],
        caches: [],
      },
    });

  startTransition(() => {
    hydrateRoot(
      document,
      <I18nextProvider i18n={i18next}>
        <StrictMode>
          <RemixBrowser />
        </StrictMode>
      </I18nextProvider>
    );
  });
}

if (window.requestIdleCallback) {
  window.requestIdleCallback(hydrate);
} else {
  // Safari doesn't support requestIdleCallback
  // https://caniuse.com/requestidlecallback
  window.setTimeout(hydrate, 1);
}

entry.server.tsx

const ABORT_DELAY = 5000;

export default async function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext
) {
  let callbackName = isbot(request.headers.get("user-agent"))
    ? "onAllReady"
    : "onShellReady";

  let instance = createInstance();
  let lng = await i18next.getLocale(request);
  let ns = i18next.getRouteNamespaces(remixContext);

  await instance
    .use(initReactI18next) // Tell our instance to use react-i18next
    .use(Backend) // Setup our backend
    .init({
      ...i18n, // spread the configuration
      lng, // The locale we detected above
      ns, // The namespaces the routes about to render wants to use
      backend: { loadPath: resolve("./i18n/locales/{{lng}}/{{ns}}.json") },
    });

  return new Promise((resolve, reject) => {
    let didError = false;

    let { pipe, abort } = renderToPipeableStream(
      <I18nextProvider i18n={instance}>
        <RemixServer context={remixContext} url={request.url} />
      </I18nextProvider>,
      {
        [callbackName]: () => {
          let body = new PassThrough();

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(createReadableStreamFromReadable(body), {
              headers: responseHeaders,
              status: didError ? 500 : responseStatusCode,
            })
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          didError = true;

          console.error(error);
        },
      }
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

root.tsx

export const loader = async ({ request }: LoaderFunctionArgs) => {
  let locale = await i18next.getLocale(request);

  return json({
    locale,
  });
};

export let handle = {
  i18n: "translation",
};

export function useChangeLanguage(locale: string) {
  let { i18n } = useTranslation();
  useEffect(() => {
    i18n.changeLanguage(locale);
  }, [locale, i18n]);
}

export const links: LinksFunction = () => [
  ...(cssBundleHref
    ? [
        { rel: "stylesheet", href: cssBundleHref },
      ]
    : []),
];

export default function App() {
  const location = useLocation();
  const { i18n } = useTranslation();
  const { locale } = useLoaderData<typeof loader>();

  return (
    <html lang={locale} dir={i18n.dir()}>
      <head>
        <meta charSet="utf-8" />
        <meta name="theme-color" content="#000000" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
          <Outlet />
        <ScrollRestoration />
        <Scripts />
        <LiveReload />
      </body>
    </html>
  );
}

drinkcoffee101 · 2023-10-10T21:09:53Z

drinkcoffee101
Oct 10, 2023
Author

figured it out

1 reply

sergiodxa Oct 11, 2023
Maintainer

It would be great if you can share what was the fix in case someone have the same issue in the future. 🙏

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Making changes to the entry.client.tsx file appears to break live reload / hmr for Remix v2.0.1 #156

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

Making changes to the entry.client.tsx file appears to break live reload / hmr for Remix v2.0.1 #156

drinkcoffee101 Oct 10, 2023

Replies: 1 comment · 1 reply

drinkcoffee101 Oct 10, 2023 Author

sergiodxa Oct 11, 2023 Maintainer

drinkcoffee101
Oct 10, 2023

Replies: 1 comment 1 reply

drinkcoffee101
Oct 10, 2023
Author

sergiodxa Oct 11, 2023
Maintainer