Error when deploying translations to Vercel
kasperkberg opened this issue · 11 comments
My translations works locally, but when deploying to Vercel, it doesn't seem to find the locale-folder.
I get this Error:
Error: ENOENT: no such file or directory, open '/var/task/public/locales/en/common.json'
My i18n.server.ts file looks like this:
import i18nextOptions from './i18nextOptions';
const backend = new FileSystemBackend('./public/locales');
export default new RemixI18Next(backend, {
fallbackLng: i18nextOptions.fallbackLng,
supportedLanguages: i18nextOptions.supportedLngs,
cookie: createCookie('locale')
});
I cannot seem to find any solutions for Remix. I have found this solution for Next.js. Do I have to do something similar here?
The problem is that the file system works differently in Vercel. You need to ensure the locales are still there after the deploy and know the path.
The library just expects a path to the folder, you can use any path there, even use one for dev and another for Vercel with the location of the translations after deploy.
I ran into the same issue.
Another solution would be to use FetchBackend instead:
import { RemixI18Next } from 'remix-i18next'
import { FetchBackend } from 'remix-i18next'
// HOST_URL in local .env:
// HOST_URL = 'http://localhost:3000'
const HOST_URL =
process.env.HOST_URL ?? `https://${process.env.VERCEL_URL}`
let backend = new FetchBackend({
baseUrl: new URL(HOST_URL),
pathPattern: 'locales/:locale/:namespace.json',
})
export let i18n = new RemixI18Next(backend, {
fallbackLng: 'en', // here configure your default (fallback) language
supportedLanguages: ['de', 'en'], // here configure your supported languages
})
@kasperkberg How did you end up solving the issue?
even use one for dev and another for Vercel with the location of the translations after deploy.
@sergiodxa How can one find out the location of the location on vercel? Calling resolve("./ xx) on returns something like /var/tasks but clearly, the public folder is stored somewhere else. I am sure there is an easy way to figure this out but I can't seem to find it.
I would be forever grateful for any help on how to actually makes this work on vercel
@msevestre Did you figure out how to get to the the outputted remix public folder dirs? I currently have the backend translations failing and revealing untranslated text until the client fixes it causing hydration issues.
@JoeMethven I am actually loading the translations in memory server side.
When I used remix-i18next on Vercel I ended up doing the same, because working with the file system on Vercel is really troublesome
@msevestre @sergiodxa have either of you got an example of this? I'm not sure how i'd convert the existing docs into memory instead
I looked at your example on an older version "remix-i18next" 2.2.0 collected-remix branch @sergiodxa, is there a way to change locale with this project as the simple i18n.changeLanguage on the client doesn't function like the newer verson does?
I looked at your example on an older version "remix-i18next" 2.2.0
collected-remixbranch @sergiodxa, is there a way to change locale with this project as the simple i18n.changeLanguage on the client doesn't function like the newer verson does?
In the latest version whatever i18n.getLocale returns in the root is gonna be the new language of the user, so you can set a cookie on an action and when the root loader is re-fetched it will use the new locale
@msevestre @sergiodxa have either of you got an example of this? I'm not sure how i'd convert the existing docs into memory instead
Here's how you can setup the translations in-memory on the latest version:
In my blog I do it because on Cloudflare there's no file system at all, and because my translation files are small I also set it on-memory on the browser, so I don't have to fetch extra data.