Translation doesn't work, it shows a key instead of translated text.

[drumsta]

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

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.

Possible fixes

[drumsta]

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",

[0x7357]

Same here.

[Silbad]

Hello, same with Win11

[VicAv99]

Still seeing this issue when deploying to Vercel

[mihanc]

Same here

[mihanc]

Still seeing this issue when deploying to Vercel

Have you managed to solve this issue?

[mihanc]

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...

[eidens-design]

I am experiencing this issue with the version 1.0.0-beta.16, on MacOS.

[josemarcilio]

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...

Not worked for me, neither in local or vercel =/

[josemarcilio]

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"],
  }),

[sermagnus]

I have the same problem with an SSR site: after several test, since I don't use the astro-i18next routing I was able to solve it using this configuration

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

export default {
    defaultLocale: "en",
    locales: ["en", "it"],
    fallbackLng : "en",
    i18nextServer: {
      debug: true,
      resources: {
        en: {
          translation: {
              ...en
          }
        },
        it: {
          translation: {
              ...it
          }
        }
      },
      initImmediate: false,
      preload: true,
      backend: null
    },
    i18nextServerPlugins: {
      fsBackend: null
    }
  };

In short, since I don't use routing I disabled i18nextServerPlugins and manually imported the translations

[sermagnus]

I confirm the bug reported by drumsta: in the build phase the backend.loadPath property of astro-i18next configuration, generate by resolve from pathe, use an absolute path for the local environment, which clearly doesn't work on the server once published.

https://github.com/yassinedoghri/astro-i18next/blob/beta/src/index.ts#L80

[moritzlang]

I have the same problem when deploying a SSR site to Vercel. Is there a better way to handle this than using the resources object?

[enricogallesio]

I had a similar issue here on Linux. After banging my head for a while I've noticed something suspect, and found out this issued was caused by the presence of a white space in the local path of the project... I guess that's my fault? ¯_(ツ)_/¯

I hope this can help

[alanescarcha]

[!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