Types warning with arrays in namespaces

[BuckyBuck135]

(Or at least that's what I think it is lol)

Hi Florian, Given this namespace home.json

{
"reviews": {
        "topper": "Our Reviews",
        "title": "Words from our customers",
        "p": "Our clients are In consequat tincidunt turpis sit amet imperdiet. Praesent Class officelan nonatoureanor mauris laoreet, iaculis libero quis. Curabitur et tempus eri consequat tincidunt turpis sit amet imperdiet. Praesent nonatourean olei aptent taciti sociosqu ad litora torquent per.",
        "reviews": [
            {
                "review": "Dictum dolor, nullam morbi sem in auctor proin. Consequat dolor habitasse nam sed tempor.",
                "name": "John Doe",
                "rank": "Homeowner"
            },
            {
                "review": "Dictum dolor, nullam morbi sem in auctor proin. Consequat dolor habitasse nam sed tempor.",
                "name": "Jane Doe",
                "rank": "Homeowner"
            }
        ],
        "cta": "Our Reviews"
    }
}

Using the following t function in index.astro <h2>{t("home:services.0.heading")}</h2>

The translations render without a problem, but I get this console problem

Argument of type '["home:services.0.heading"]' is not assignable to parameter of type '[key: string | string[], options: TOptionsBase & $Dictionary & { defaultValue: string; }] | [key: string | string[], defaultValue: string, options?: (TOptionsBase & $Dictionary) | undefined] | [key: ...]'. Type '["home:services.0.heading"]' is not assignable to type '[key: "home" | "home:layout.title" | TemplateStringsArray | "about" | "projects" | "project-1" | "project-2" | "cta" | "quote" | "estimate" | "ctaComponent.cta" | ... 68 more ... | ("home" | ... 77 more ... | "home:reviews.p")[], options?: (TOptionsBase & $Dictionary) | undefined]'.

Other instances of t functions do not give me such warnings e.g. {t("home:hero.cta-2")} where simple dot notation for objects is used.

Wondering if there's something to do on my end?

Thank you!

[florian-lefebvre]

Well I think that's because the key is wrong! Here it should be home:reviews.reviews.0.name. Make sure you're using the right path. Otherwise, what happens with the translation files is probably just i18next related since I don't do much here, but happy to help you debug! (A minimal repro makes this easier ;))

[BuckyBuck135]

Hi Florian, Oh, I'm very sorry I wasted your time.. I actually pasted the wrong json data... :( I've updated my initial post.

I'm also trying to get a repro in Stackblitz, but it's giving me trouble: it doesn't seem to detect the i18n integration. Using <I18nClient /> requires adding the i18n integration to your Astro config. That's a problem I don't have on my own project, just this Stackblitz.

Thank you for your patience!

[florian-lefebvre]

Yeah this issue is because Stackblitz has partial support for AsyncLocalStorage, so not your fault! I'm going to download the project and have a look

[florian-lefebvre]

So there's an upstream issue for this: https://github.com/i18next/i18next/issues/2189. I'm experimenting to fix it

[florian-lefebvre]

It will require copying the json into a ts interface

[BuckyBuck135]

Hey Florian, Thanks. I'm reading that issue you linked. I've created a namespace.ts as shown in the example, but it doesn't seem to be recognized by your package. I'm guessing there's work to be done behind the hood. Good luck with fixing this!

[florian-lefebvre]

Fixed in 0.4.3! Make sure that your tsconfig.json compilerOptions.strict should is set to true. If you're using Astro tsconfig presets, use either astro/tsconfigs/strict or astro/tsconfigs/strictest

[BuckyBuck135]

Hi Florian, Hope you're well. Unfortunately, I'm still getting the same type warnings in spite of:

• setting "extends": "astro/tsconfigs/strictest"
• setting compilerOptions.strict to true
• when it comes to the upstream issue you mentioned, I've tried creating namespaces in .ts and setting as const like shown, or just using that .ts namespace and no .json. Neither has worked; actually I'd get warnings on ALL instances of t(). is there anything special to do if we're using .ts namespaces?

• I haven't tried with interface because I don't know where to place that file :(

  As before, the warnings only occur when accessing arrays, as shown on the screenshot.

Here's my repo: https://github.com/BuckyBuck135/Advanced-Astro-v4-i18n/blob/main/src/routes/index.astro

Thank you. Geoffrey

[florian-lefebvre]

Hi! It's working for me doing this:

• Clone the repo
• Run npm install
• Run npm run astro sync

I tried restarting VSC etc to see if I could see the error you mention but I can't.

[BuckyBuck135]

Hi Florian, Thank you. I think astro sync did the job. All working perfectly now. Thanks for taking the time.