TanStackT
TanStack•16mo ago•
49 replies
few-sapphire

I18n integration (formerly css loading issue)

app.config.ts:
// ...
export default defineConfig({
    tsr: {
        appDirectory: './src/router',
        generatedRouteTree: './src/router/routeTree.gen.ts',
        routesDirectory: './src/router/routes',
    },
    routers: {
        client: {
            entry: './src/router/client.tsx',
        },
        ssr: {
            entry: './src/router/ssr.tsx',
        },
        api: {
            entry: './src/router/api.ts',
        },
    },
    server: {
        devProxy: {
            '/api': 'http://localhost:4001',
        },
        preset: "node-server"
    },
    vite: {
        plugins: () => [
            viteTsConfigPaths({
                projects: ['./tsconfig.json'],
            }),
        ],
    },
});


./src/app/layout.tsx
import './reset.css';
import './globals.css';

export const RootLayout = ({ children }: React.PropsWithChildren) => {
    return children;
};


./src/router/routes/_root.tsx
// ...
import { RootLayout } from '~/app/layout';

export const Route = createRootRoute({
    meta: () => [
        {
            charSet: 'utf-8',
        },
        {
            name: 'viewport',
            content: 'width=device-width, initial-scale=1',
        },
        {
            title: 'ficlib',
        },
    ],
    component: RootComponent,
});

function RootComponent() {
    return (
        <RootDocument>
            <Outlet />
        </RootDocument>
    );
}

function RootDocument({ children }: { children: React.ReactNode }) {
    return (
        <Html>
            <Head>
                <Meta />
            </Head>
            <Body>
                <RootLayout>{children}</RootLayout>
                <ScrollRestoration />
                <Scripts />
            </Body>
        </Html>
    );
}


it's fine on dev server
Was this page helpful?