Get locale in Shopify Remix App

trenkwill1 · ‎08-24-2024

I'm trying to get the merchants admin locale in root.jsx to pass it to the i18nManager

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
} from "@remix-run/react";
import { useAppBridge } from "@shopify/app-bridge-react";
import { I18nContext, I18nManager } from "@shopify/react-i18n";
import { useState, useEffect } from "react";

export default function App() {
  const shopify = useAppBridge();
  console.log(shopify.config.locale);
  const [locale, setLocale] = useState("en");

  const i18nManager = new I18nManager({
    locale: locale,
    onError(error) {
      console.error("I18n Error:", error);
    },
  });
  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="preconnect" href="https://cdn.shopify.com/" />
        <link
          rel="stylesheet"
          href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <I18nContext.Provider value={i18nManager}>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </I18nContext.Provider>
      </body>
    </html>
  );
}

shopify.config.locale is outputing :

Error: shopify.config can't be used in a server environment. You likely need to move this code into an Effect.

how do i get the locale in the root.jsx?

trenkwill1 · ‎08-25-2024

ok I got it from the parameter of the url :

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";
import { I18nContext, I18nManager } from "@shopify/react-i18n";
import { useState } from "react";

export async function loader({ request }) {
  const url = new URL(request.url);
  const locale = url.searchParams.get("locale") || "en";
  return { locale };
}

export default function App() {
  const { locale: initialLocale } = useLoaderData();
  const [locale, setLocale] = useState(initialLocale);

  const i18nManager = new I18nManager({
    locale,
    onError(error) {
      console.error("I18n Error:", error);
    },
  });

  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="preconnect" href="https://cdn.shopify.com/" />
        <link
          rel="stylesheet"
          href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <I18nContext.Provider value={i18nManager}>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </I18nContext.Provider>
      </body>
    </html>
  );
}

View solution in original post

trenkwill1 · ‎08-25-2024

ok I got it from the parameter of the url :

import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useLoaderData,
} from "@remix-run/react";
import { I18nContext, I18nManager } from "@shopify/react-i18n";
import { useState } from "react";

export async function loader({ request }) {
  const url = new URL(request.url);
  const locale = url.searchParams.get("locale") || "en";
  return { locale };
}

export default function App() {
  const { locale: initialLocale } = useLoaderData();
  const [locale, setLocale] = useState(initialLocale);

  const i18nManager = new I18nManager({
    locale,
    onError(error) {
      console.error("I18n Error:", error);
    },
  });

  return (
    <html>
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width,initial-scale=1" />
        <link rel="preconnect" href="https://cdn.shopify.com/" />
        <link
          rel="stylesheet"
          href="https://cdn.shopify.com/static/fonts/inter/v4/styles.css"
        />
        <Meta />
        <Links />
      </head>
      <body>
        <I18nContext.Provider value={i18nManager}>
          <Outlet />
          <ScrollRestoration />
          <Scripts />
        </I18nContext.Provider>
      </body>
    </html>
  );
}