Page title not being translated after deployment (on Vercel) #219
Replies: 1 comment 4 replies
-
|
The most probable issue is that the translation files are not being loaded server side, this is common in Vercel if you use the fs backend of i18next, I recommend you to import them server side or fetch them with another backend |
Beta Was this translation helpful? Give feedback.
-
|
Hi @sergiodxa, Thanks for the response! I've tried removing the backend and importing translations directly through resources. However, now even locally the page title is still not translated but the rest of the page is translated without issues. This is my current setup to highlight the changes. Again, using the readme as the base template: // i18n.server.ts
import { RemixI18Next } from "remix-i18next/server";
import i18n from "~/localization/i18n"; // Main config file
const i18next = new RemixI18Next({
detection: {
supportedLanguages: i18n.supportedLngs,
fallbackLanguage: i18n.fallbackLng,
async findLocale(request) {
const { pathname } = new URL(request.url);
const locale = pathname.split("/").at(1) || null;
return locale;
},
},
i18next: {
...i18n,
},
});
export default i18next;// entry.client.tsx
import i18n from "./localization/i18n";
import en from "./localization/en/translation.json";
import fr from "./localization/fr/translation.json";
async function hydrate() {
await i18next
.use(initReactI18next)
.use(LanguageDetector)
.init({
...i18n,
ns: getInitialNamespaces(),
resources: { en: { translation: en }, fr: { translation: fr } },
detection: {
order: ["htmlTag"],
caches: [],
},
});
// ...rest of code here same as in readme
}// entry.server.ts
import i18next from "~/localization/i18n.server";
import i18n from "./localization/i18n";
import en from "./localization/en/translation.json";
import fr from "./localization/fr/translation.json";
const ABORT_DELAY = 5000;
export default async function handleRequest(
request: Request,
responseStatusCode: number,
responseHeaders: Headers,
remixContext: EntryContext
) {
const callbackName = isbot(request.headers.get("user-agent"))
? "onAllReady"
: "onShellReady";
const instance = createInstance();
const lng = await i18next.getLocale(request);
const ns = i18next.getRouteNamespaces(remixContext);
await instance.use(initReactI18next).init({
...i18n,
lng,
ns,
resources: { en: { translation: en }, fr: { translation: fr } },
});
//...rest of code here same as in readme// page loader
import i18nextServer from "~/localization/i18n.server";
export const loader = async ({ request }: LoaderFunctionArgs) => {
const t = await i18nextServer.getFixedT(request);
const title = `${t("book-appointment-now")} • ${PAGE_TITLE}`;
return json({ title });
};// page meta function
export const meta: MetaFunction<typeof loader> = ({ data }) => {
console.log("META TITLE:", data?.title);
return [{ title: data?.title }, { name: "og:title", content: data?.title }];
};Result locally and deployed: Is there something I'm missing? |
Beta Was this translation helpful? Give feedback.
-
|
Hey @sergiodxa, I did what you recommended with no luck, any other suggestions? |
Beta Was this translation helpful? Give feedback.
-
|
If you can create a reproduction I could try to look into it. Also double check that your |
Beta Was this translation helpful? Give feedback.
-
|
@sergiodxa, Link to a minimal reproduction repo I've also deployed it on Vercel. I import translations server side as you suggested. |
Beta Was this translation helpful? Give feedback.
-
Hi,
I've followed the instructions from the readme on using
getFixedT()in my loader and returning translated text which I then use in my meta function. This works in my local dev and preview environments, but I've noticed on Vercel it fails to translate, and just displays the translation keys:Local env:
Deployed version:
I've tried all sort of different configs but it doesn't seem to work. In Vercel logs, I see the accepted languages from logging
requestbut I'm starting to think i18n might not be ready early enough to translate stuff in the<head>element? Everything else on the page works absolutely fine!I'll appreciate any help with this 🙏🏼
Beta Was this translation helpful? Give feedback.
All reactions