Hydrate Fallback and Error Element?

[vikkio88]

Hi there,

I am trying to adopt this and coming from react-router in data mode I found this easy to adopt and understand, the only problem is I cannot make HydrateFallback and ErrorComponent/Element work as it does on react-router? am I doing something wrong?

 const router = createBrowserRouter([
    {
      path: "/",
      Component: Root,
      HydrateFallback: ErrorPage,
      hasErrorBoundary: true,
      errorElement: errorPage,
      loader: async ({ params }) => {
        console.log("loader", params);
        throw Error("Loading error");
      },
      children: [
        {
          index: true,
          Component: Home,
       },
        {
          path: "/about",
          Component: About,
        },
        {
          path: "/account",
          Component: Account,
        },
      ],
    },


// and the snippet is down here
{#snippet errorPage()}
  <ErrorPage />
{/snippet}

What I expect it to happen is to just show me the error page, since the main loader is throwing. isn't this just suppose to work?

I tried to move it to a children component, and still not working.