Open
Description
Which project does this relate to?
Start
Describe the bug
When using the Lingui i18n localization + TanStack Start template, when trying to use a localized meta title the page hydrates weirdly.
import { i18n } from "@lingui/core";
import { msg } from "@lingui/core/macro";
export const Route = createFileRoute("/")({
component: Home,
head: () => {
return {
meta: [
{
title: i18n._(msg`Test English title`),
},
],
};
},
});Before hydration, the SSR render is all correct. The page title is localized and the content is correct.
After hydration, the contents appears twice, the top appears to be the SSR version (clicking links will load pages), the bottom appears to be the hydrated client (clicking links do not load pages). The localized title also does not work because there are two <title> in the HTML
<head>
<title>TanStack Start | Type-Safe, Client-First, Full-Stack React Framework</title>
<title>Test English title</title>There are also no hydration errors in the console.
Your Example Website or App
Steps to Reproduce the Bug or Issue
- Go to the sandbox
- Open the preview in a new window (to see the page title)
- Iinitially the page title will be correct in the SSR version
- Wait a few seconds for the client hydration
- Page title will be incorrect and content will be doubled
Expected behavior
The page to be hydrated correctly, no double up.
The page title to be localized.
Screenshots or Videos
SSR before hydration
After hydration
Platform
- OS: Windows
- Browser: Chrome
- Version: 137
Additional context
No response
Metadata
Metadata
Assignees
Labels
No labels