remix-i18next server translations fail with Vercel

[JoeMethven]

Works perfectly locally, when deployed the translations from the server aren't translated, then when they get to the client they become translated (causing a hydration error everywhere) the locale path is resolve('./public/locales/{{lng}}/{{ns}}.json') in the git example. I have tried changing this to ${process.env.VERCEL_URL}/locales/{{lng}}/{{ns}}.json as well but still the same, not sure how to resolve vercel path correctly for remix to understand, anyone had this issue before?

Looking at the vercel source outputted build files UI it looks like there is a locales directly on the root level, is there a proper way to target this?

[sergiodxa]

If you check the Output of your deployment, you'll notice that the public folder doesn't exists anymore.

So on Vercel you need to change the path to don't have ./public and instead start directly with ./locales.

[JoeMethven]

entry.server.tsx

await instance
		.use(initReactI18next) // Tell our instance to use react-i18next
		.use(Backend) // Setup our backend
		.init({
			...i18n, // spread the configuration
			lng, // The locale we detected above
			ns, // The namespaces the routes about to render wants to use
			backend: {
				loadPath:
					process.env.NODE_ENV === 'development'
						? resolve('./public/locales/{{lng}}/{{ns}}.json')
						: resolve('./locales/{{lng}}/{{ns}}.json')
			}
		});

i18next.server.ts

let i18next = new RemixI18Next({
	detection: {
		supportedLanguages: i18n.supportedLngs,
		fallbackLanguage: i18n.fallbackLng
	},
	// This is the configuration for i18next used
	// when translating messages server-side only
	i18next: {
		...i18n,
		backend: {
			loadPath:
				process.env.NODE_ENV === 'development'
					? resolve('./public/locales/{{lng}}/{{ns}}.json')
					: resolve('./locales/{{lng}}/{{ns}}.json')
		}
	},
	// The backend you want to use to load the translations
	// Tip: You could pass `resources` to the `i18next` configuration and avoid
	// a backend here
	backend: Backend
});

Server still returns untranslated text with ./locales

[sergiodxa]

I would recommend you to open an issue on i18next-fs-backend's repo because they may know better how to use that backend on Vercel

[JulienHe]

Created one i18next/i18next-fs-backend#30 👍

[juniorforlife]

@JoeMethven @JulienHe did you manage to fix the problem?