SolidJS•2y ago

i18n solid primitive with SolidStart

I'm in a snake biting its own tail situation. Using @solid-primitives/i18n, I'd like to use the /[lang]/... param to indicate I18nProvider which language to pick.

export default function Root() {
  const params = useParams();

  return (
    <Html>
      <Head>
        ...
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <I18nProvider dict={dict} locale={params.lang}>
              <Routes>
                <FileRoutes />
              </Routes>
            </I18nProvider>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

export default function Root() {
  const params = useParams();

  return (
    <Html>
      <Head>
        ...
      </Head>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <I18nProvider dict={dict} locale={params.lang}>
              <Routes>
                <FileRoutes />
              </Routes>
            </I18nProvider>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

But I hit the error:

ReferenceError: navigator is not defined
    at Proxy.createI18nContext (/Users/Projects/xyz/node_modules/@solid-primitives/i18n/dist/server.cjs:14:44)

ReferenceError: navigator is not defined
    at Proxy.createI18nContext (/Users/Projects/xyz/node_modules/@solid-primitives/i18n/dist/server.cjs:14:44)

But useParams() returns undefined. Most probably not working outside <Routes>...

4 Replies

thetarnav•2y ago

try something along these lines Providers are just passing children through so you should be able to put it in between Routes and FileRoutes

export default function Root() {
  return (
    <Html>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <Routes>
              {() => {
                const params = useParams();

                return (
                  <I18nProvider dict={dict} locale={params.lang}>
                    <FileRoutes />
                  </I18nProvider>
                );
              }}
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

export default function Root() {
  return (
    <Html>
      <Body>
        <Suspense>
          <ErrorBoundary>
            <Routes>
              {() => {
                const params = useParams();

                return (
                  <I18nProvider dict={dict} locale={params.lang}>
                    <FileRoutes />
                  </I18nProvider>
                );
              }}
            </Routes>
          </ErrorBoundary>
        </Suspense>
        <Scripts />
      </Body>
    </Html>
  );
}

But it might not work as well... Is there a way to do layouts in solid-start? code that is under the router but shared on every route...

binajmenOP•2y ago

I've created [lang].tsx in the root of the routes folder

import { Outlet, useParams } from "solid-start";
import { I18nProvider } from "~/i18n";
import { dict } from "~/i18n-dict";

export default function Main() {
  const params = useParams();

  return (
    <I18nProvider dict={dict} locale={params.lang ?? "en"}>
      <Outlet />
    </I18nProvider>
  );
}

import { Outlet, useParams } from "solid-start";
import { I18nProvider } from "~/i18n";
import { dict } from "~/i18n-dict";

export default function Main() {
  const params = useParams();

  return (
    <I18nProvider dict={dict} locale={params.lang ?? "en"}>
      <Outlet />
    </I18nProvider>
  );
}

It is indeed a layout Seems to work well 🙂 Again, writing questions get you answers! 😉

thetarnav•2y ago

ok cool that's good because I have no idea how to solve it in the root file 😅 even if the api could change

binajmenOP•2y ago

yeah I suppose useParams() make sense under <FileRoutes/> Thx for the brainstorm 😉 I need to figure out how to change the lang of <Html/> but that will be ok for now 😄

Gaming

Programming

i18n solid primitive with SolidStart