astro-i18next: Translation doesn't work, it shows a key instead of translated text.

Describe the bug

Translation doesn’t work - e.g. in case of translation title={t("cards.documentation.title")} it shows cards.documentation.title on the web page. I guess the same issue is described in discusion #99, and it might be the case on Windows only.

To Reproduce

Steps to reproduce the behavior:

  1. Open the folder astro-i18next\examples\node in VS Code
  2. Run nmp install, and then npm run dev, point to http://localhost:3000/
  3. All translated messages are untranslated

Expected behavior

Translated messages should appear.

Screenshots

image

Context (please complete the following information):

  • astro-i18next version: 1.0.0-beta.15
  • astro version: 1.9.1
  • OS: Windows 11
  • Browser: Chrome 109, Edge 109

By adding i18nextServer.debug: true the following is observabled in Terminal window, i.e. notice missing slashes in a path.

image

Possible fixes

About this issue

Most upvoted comments

Adding the following configuration to the astro-i18next.config has helped:

  i18nextServer: {
    backend: {
      loadPath: './public/locales/{{lng}}/{{ns}}.json',
    },
  },

The code at line 78 works incorrectly at least on Windows:

fileURLToPath(config.publicDir) + "locales/{{lng}}/{{ns}}.json",

Still seeing this issue when deploying to Vercel

[!IMPORTANT] To solve this simply add the following to the file astro-i18next.config.mjs:

import en from "./public/locales/en/translation.json" assert {type: "json"};
import es from "./public/locales/es/translation.json" assert {type: "json"}; // other example

export default {
    i18nextServer: {
        resources: {
            en: {
                translation: {
                    ...en
                }
            },
            es: { // other example
                translation: {
                    ...es
                }
            }
        },
    }
};

Adapt the code as you need it, don’t forget variables like defaultLocale and locales

Got rid of the fsBackend plugin and added the resources object, and now everything is working. But I hope it’s a temporary solution and the issue will be fixed in the further releases… image

image

Still seeing this issue when deploying to Vercel

Fixed my deploy on Vercel by adding includeFiles in my adapter settings:

  adapter: vercel({
    includeFiles: ["./public/locales/en/translation.json", "./public/locales/pt/translation.json"],
  }),