Importing clientLoader from external file causing hydration issues

[rapmendoza]

Hi, In my Remix app I have this folder structure for my layout route:

app
  /routes
    /_private
      route.tsx
      route.client.ts --- contains my clientLoader
      route.server.ts --- contains my loader

When adding a HydrateFallback, the clientLoader needs to be inside the route.tsx because if not, it is causing hydration issues. Is that really the case? I want to separate client and server files because the route itself is getting really long, especially when including loaders and actions.

Here's a simple scenario I have.

With hydration issue:

// route.server.ts
export const loader = async () => {
  return null;
};

// route.client.ts
export const clientLoader = async ({
  serverLoader,
}: ClientLoaderFunctionArgs) => {
  const data = await serverLoader();
  return data;
};
clientLoader.hydrate = true;

// route.tsx
import { clientLoader } from './route.client'
import { loader } from './route.server'

export { clientLoader, FallbackLoader as HydrateFallback, loader }

export const PrivateLayout = () => {
  // ...component
}

Without hydration issue:

// route.tsx
export const loader = async () => {
  return null
}

export const clientLoader = async ({
  serverLoader,
}: ClientLoaderFunctionArgs) => {
  const data = await serverLoader()
  return data
}
clientLoader.hydrate = true
export { FallbackLoader as HydrateFallback }

export const PrivateLayout = () => {
  // ...component
};

Remix v2.13.1
React v18.2

Any kind of assistance would be appreciated. 🙏