extended-salmon

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'],
            }),
        ],
    },
});

// ...
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

39 Replies

extended-salmonOP•12mo ago

message is glitched, nice app.config.ts

import { defineConfig } from '@tanstack/start/config';
import viteTsConfigPaths from 'vite-tsconfig-paths';

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'],
            }),
        ],
    },
});

import { defineConfig } from '@tanstack/start/config';
import viteTsConfigPaths from 'vite-tsconfig-paths';

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 { createRootRoute } from '@tanstack/react-router';
import { Outlet, ScrollRestoration } from '@tanstack/react-router';
import { Body, Head, Html, Meta, Scripts } from '@tanstack/start';
import * as React from 'react';

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 { createRootRoute } from '@tanstack/react-router';
import { Outlet, ScrollRestoration } from '@tanstack/react-router';
import { Body, Head, Html, Meta, Scripts } from '@tanstack/start';
import * as React from 'react';

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>
    );
}

what I do:

bun run build
bun run start

bun run build
bun run start

this also doesn't work:

import './reset.css?url';
import './globals.css?url';

import './reset.css?url';
import './globals.css?url';

I tried to import css in _root.tsx but it doesn't work either css files content is correct

unwilling-turquoise•12mo ago

try importing like this:

import resetCss from './reset.css?url';
import globalsCss from './globals.css?url';

import resetCss from './reset.css?url';
import globalsCss from './globals.css?url';

and then add this to your route:

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

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

extended-salmonOP•12mo ago

I fixed it, this is what I added:

extended-salmonOP•12mo ago

yep I used next.js before so it's kinda unintuitive

unwilling-turquoise•12mo ago

I'm not exactly sure what is the reason for this behaviour but I'm pretty sure this will not stay like this. I think in the future at some point just importing like this will work import './reset.css';... As it already does in dev mode but not in PROD mode. I dont think this inconsistent behaviour will stay. Maybe this should also be classified as a bug or there is already one. I think almost everybody goes through this issue as it was also for me the first thing I got stuck on

extended-salmonOP•12mo ago

glad I don't use css modules in this project... but I agree, this feature should be

fair-rose•12mo ago

@enoro Have you managed to add a custom font yet?

extended-salmonOP•12mo ago

I use css imports so idk

extended-salmonOP•12mo ago

you can create your own cdn if you want to

conscious-sapphire•12mo ago

I load fontsource like this

fair-rose•12mo ago

I tried adding it using links like you have above but I had some troubles after hooking it up with tailwind. I noticed those flickering of the styles when I reload the page, I will show a video later. Nextjs’s abstraction has messed my basic web dev skills lol

conscious-sapphire•12mo ago

and the tailwind config

fair-rose•12mo ago

What is @fontsource?

conscious-sapphire•12mo ago

https://fontsource.org/

Fontsource

Download and self-host 1500+ open-source fonts in neatly bundled NPM packages. Access a comprehensive library of web typefaces for free.

conscious-sapphire•12mo ago

fair-rose•12mo ago

Lovely, Ill give it a shot and see how it plays out thanks for this information

fair-rose•12mo ago

@Aaron This is the flickering I am talking about when I reload the page

fair-rose•12mo ago

Nevermind, It was an issue with how I setup the devtools causing the flickering, fixed

unwilling-turquoise•12mo ago

how did you fix it ?

extended-salmonOP•12mo ago

it doesn't happen on production so don't worry

conscious-sapphire•12mo ago

it happened on production

extended-salmonOP•12mo ago

what

conscious-sapphire•12mo ago

try https://tanstack.com/

fair-rose•12mo ago

@Eugen The issue is with the devtools, just follow the docs on how to set it up and disable in production.

unwilling-turquoise•12mo ago

Yeah, I'm just curious what was the fix, as I also sometimes experience this randomly

extended-salmonOP•12mo ago

it's dev server thing

unwilling-turquoise•12mo ago

@Fitim Bytyqi yeah I set it up for PROD already. I thought you also fixed it in DEV

fair-rose•12mo ago

I am not experiencing it in dev too

unwilling-turquoise•12mo ago

ok then its fine, it happens rarely enough to not be an issue

fair-rose•12mo ago

maybe there's something else causing it for ya

unwilling-turquoise•12mo ago

yeah maybe, thanks

fair-rose•12mo ago

you are welcome

conscious-sapphire•12mo ago

ur solution of i18n is awesome

conscious-sapphire•12mo ago

you can use dynamic import to load message without node fs module

conscious-sapphire•12mo ago

unwilling-turquoise•12mo ago

ah ok nice thanks!

conscious-sapphire•12mo ago

and u can extract the vinxi useSession like this with typescript support

conscious-sapphire•12mo ago

unwilling-turquoise•12mo ago

very cool, will do those improvements too, thank you 😄

Gaming

Programming

I18n integration (formerly css loading issue)

Did you find this page helpful?