I18n integration (formerly css loading issue)
app.config.ts:
./src/app/layout.tsx
./src/router/routes/_root.tsx
it's fine on dev server
// ...
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'],
}),
],
},
});// ...
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;
};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>
);
}// ...
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
