I18n integration (formerly css loading issue) | TanStack | Page 1

subtle bison Oct 8, 2024, 3:40 PM

#

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

#

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

#

./src/app/layout.tsx

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

#

what I do:

bun run build
bun run start

#

this also doesn't work:

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

narrow mango Oct 8, 2024, 3:56 PM

#

try importing like this:

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

subtle bison Oct 8, 2024, 3:56 PM

#

I fixed it, this is what I added:

subtle bison Oct 8, 2024, 3:56 PM

#

narrow mango try importing like this: ``` import resetCss from './reset.css?url'; import glo...

yep

#

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

narrow mango Oct 8, 2024, 3:59 PM

#

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

subtle bison Oct 8, 2024, 3:59 PM

#

glad I don't use css modules in this project...

#

but I agree, this feature should be

undone tartan Oct 12, 2024, 9:11 PM

#

@subtle bison Have you managed to add a custom font yet?

subtle bison Oct 12, 2024, 9:13 PM

#

undone tartan <@1103610714435883079> Have you managed to add a custom font yet?

I use css imports so idk

#

you can create your own cdn if you want to

silent badger Oct 12, 2024, 9:17 PM

#

I load fontsource like this

undone tartan Oct 12, 2024, 9:18 PM

#

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

silent badger Oct 12, 2024, 9:18 PM

#

silent badger I load fontsource like this

and the tailwind config

undone tartan Oct 12, 2024, 9:20 PM

#

What is @fontsource?

silent badger Oct 12, 2024, 9:20 PM

#

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.

#

undone tartan Oct 12, 2024, 9:20 PM

#

Lovely, Ill give it a shot and see how it plays out

#

thanks for this information

undone tartan Oct 13, 2024, 12:45 PM

#

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

undone tartan Oct 13, 2024, 1:23 PM

#

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

narrow mango Oct 13, 2024, 6:18 PM

#

how did you fix it ?

subtle bison Oct 13, 2024, 6:23 PM

#

undone tartan <@648547944420605971> This is the flickering I am talking about when I reload th...

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

silent badger Oct 13, 2024, 6:23 PM

#

it happened on production

subtle bison Oct 13, 2024, 6:23 PM

#

what

silent badger Oct 13, 2024, 6:23 PM

#

try https://tanstack.com/

undone tartan Oct 13, 2024, 6:24 PM

#

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

narrow mango Oct 13, 2024, 6:24 PM

#

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

subtle bison Oct 13, 2024, 6:24 PM

#

it's dev server thing

narrow mango Oct 13, 2024, 6:24 PM

#

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

undone tartan Oct 13, 2024, 6:24 PM

#

I am not experiencing it in dev too

narrow mango Oct 13, 2024, 6:24 PM

#

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

undone tartan Oct 13, 2024, 6:25 PM

#

maybe there's something else causing it for ya

narrow mango Oct 13, 2024, 6:25 PM

#

yeah maybe, thanks

undone tartan Oct 13, 2024, 6:25 PM

#

you are welcome

silent badger Oct 13, 2024, 6:35 PM

#

narrow mango yeah maybe, thanks

ur solution of i18n is awesome

#

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

#

narrow mango Oct 13, 2024, 6:45 PM

#

ah ok nice thanks!

silent badger Oct 13, 2024, 6:48 PM

#

narrow mango ah ok nice thanks!

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

#

narrow mango Oct 13, 2024, 6:54 PM

#

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

#I18n integration (formerly css loading issue)