Page won't render when exporting HydrateFallback #13608

CodeSmith32 · 2025-05-14T18:37:44Z

CodeSmith32
May 14, 2025

I'm using flat routes from the @react-router/fs-routes. I've turned off SSR in my react-router.config.ts file because I don't plan to use it.
I export a HydrateFallback component from my root.tsx file to try to get rid of the annoying "HEY THERE DEV!!" message...

💿 Hey developer 👋. You can provide a way better UX than this when your app is loading JS modules and/or running `clientLoader` functions. Check out https://remix.run/route/hydrate-fallback for more information.

Now, suddenly, the index page won't load.

What am I doing wrong?

import "./index.css";
import { Links, Meta, Outlet } from "react-router";

export const HydrateFallback = () => {
  return <div>Loading...</div>;
};

export default () => {
  return (
    <html>
      <head>
        <meta charSet="utf8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href="./assets/favicon.svg" />
        <Meta />
        <Links />
      </head>
      <body>
        <div className="w-[100vw] h-[100vh] absolute top-0 left-0 overflow-hidden flex">
          <Outlet />
        </div>
      </body>
    </html>
  );
};

I'm just trying to follow the docs to get rid of the dumb message. It's appearing in production as well. How can I suppress it??

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Page won't render when exporting HydrateFallback #13608

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 0 comments

Select a reply

Uh oh!

Uh oh!

Page won't render when exporting HydrateFallback #13608

Uh oh!

Uh oh!

CodeSmith32 May 14, 2025

Replies: 0 comments

CodeSmith32
May 14, 2025