I'm trying to implement internationalization within some UI components in my Astro project made with SolidJS. I know there is a library for i18n for Solid but ended up just breaking the project's build.

I didn't find any way to pass the translated strings to SolidJS Components, I tried with props as well such as:

---
import { t } from "i18next";
---

<SolidJsComponent subtitle={t("home.subtitle")} />

But the subtitle string ends up empty. To be precise the <SolidJsComponent /> component is static and doesn't have a state or logic, just exports JSX that gets converted by Astro's integration of SolidJS into plain HTML.

I know I could just refactor the component itself into .astro but I will also have more complex components in the future that are going to have state, animations, and so on, so the problem is still unresolved.

EDIT!

I found out that it works with passing props, I was mistaking the key for my string! But still not an elegant solution.

yassinedoghri / astro-i18next

Anyone tried to make it work within SolidJS UI Components? #149

EDIT!