What would cause the nested routing to disregard the _layout.tsx file?

[EvanHammond]

I have just implemented my first few routes using the hybrid routes in remix-flat-routes. But for some reason, it seems to be ignoring the content of my _layout.tsx file which is colocated to the route file.

My current routes (via npx remix routes)

<Routes>
  <Route file="root.tsx">
    <Route file="routes/_application+/_layout.tsx">
      <Route path="dashboard" file="routes/_application+/dashboard.tsx" />
    </Route>
    <Route file="routes/_public+/_layout.tsx">
      <Route index file="routes/_public+/_index.tsx" />
    </Route>
  </Route>
</Routes>

My vite.config.ts (mostly borrowed from epic-stack):

export default defineConfig({
  plugins: [
    remix({
      future: {
        v3_fetcherPersist: true,
        v3_relativeSplatPath: true,
        v3_throwAbortReason: true,
      },
      ignoredRouteFiles: ['**/*'],
      serverModuleFormat: 'esm',
      routes: async (defineRoutes) => {
        return flatRoutes('routes', defineRoutes, {
          ignoredRouteFiles: [
            '.*',
            '**/*.css',
            '**/*.test.{js,jsx,ts,tsx}',
            '**/__*.*',
            // This is for server-side utilities you want to colocate
            // next to your routes without making an additional
            // directory. If you need a route that includes "server" or
            // "client" in the filename, use the escape brackets like:
            // my-route.[server].tsx
            '**/*.server.*',
            '**/*.client.*',
            '**/components/**',
            '**/constants/**',
          ],
        });
      },
    }),
    tsconfigPaths(),
  ],
});

Do _layout.tsx files still follow the standard react-router layout syntax that requires an <Outlet /> where the child route would be rendered into?

As an example, here is the content of my routes/_public+/_layout.tsx.

import { Outlet } from '@remix-run/react';
import clsx from 'clsx';
import { type FC, type PropsWithChildren } from 'react';

type PublicLayoutProps = Record<string, unknown>;

export const loader = () => null;

export const PublicLayout: FC<PropsWithChildren<PublicLayoutProps>> = ({}) => {
  return (
    <div className={clsx('flex flex-row bg-gray-900')}>
      <Outlet />
    </div>
  );
};

PublicLayout.displayName = 'PublicLayout';

For whatever reason, the routes/_public+/_index.tsx does not include the wrapping container from routes/_public+/_layout.tsx.

Apologies if I missed something from the documentation that offers a very simple solution.

[EvanHammond]

Yep. It was something simple. I forgot to export my layout component using export default.