solidjs-community
@solid-primitives/i18n: Please provide sample app with SolidStart?
Probably it's just me but I'm struggling to get this library working with SolidStart.
I'm just trying the first basic example in a new (bare) SolidStart project, but I always get this error:
An error occured while server rendering /: object is not iterable (cannot read property Symbol(Symbol.iterator))
The error occurs at this line:
const [t, {add, locale, dict}] = useI18n();
This is the first line of my Root component, so I don't know what I could do more?
Thanks a lot!
Okay, I understood what I did wrong: I was trying to use I18nContext.Provider and useI18n() in the same component.
Anyway, maybe a sample app with SolidStart could still be useful.
@JohanHeyvaert wanna PR an example, or share how you did this so I can submit one?
I have got this working, but I have run into the same issue when trying to set the title to be a t-reference.
export default function Root() {
return (
<html lang="en">
<I18nContext.Provider value={createI18nContext(dict, "en")}>
<Head>
<Title>title<Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<body>
<ErrorBoundary>
<Suspense>
<Routes>
<FileRoutes />
</Routes>
</Suspense>
</ErrorBoundary>
<Scripts />
</body>
</I18nContext.Provider>
</html>
)
}
export default function Root() {
return (
<html lang="en">
<I18nContext.Provider value={createI18nContext(dict, "en")}>
{untrack(() => {
const [t] = useI18n()
return <><Head>
<Title>{t('title')}<Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<body>
<ErrorBoundary>
<Suspense>
<Routes>
<FileRoutes />
</Routes>
</Suspense>
</ErrorBoundary>
<Scripts />
</body></>
})}
</I18nContext.Provider>
</html>
)
}
or
export default function Root() {
const i18n = createI18nContext(dict, "en")
const [t] = i18n
return (
<html lang="en">
<I18nContext.Provider value={i18n}>
<Head>
<Title>{t('title')}<Title>
<Meta charset="utf-8" />
<Meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<body>
<ErrorBoundary>
<Suspense>
<Routes>
<FileRoutes />
</Routes>
</Suspense>
</ErrorBoundary>
<Scripts />
</body>
</I18nContext.Provider>
</html>
)
}
something like that probably
