Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛[Bug] Locale not working and components always show english translations #213

Open
mcorraodab opened this issue Jun 18, 2024 · 0 comments
Labels
bug Something isn't working

Comments

@mcorraodab
Copy link

mcorraodab commented Jun 18, 2024

Dear team,

Please find below details of an issue that I've just found while trying to build a new discount app.

Issue summary

The language is not localized by AppProvider. AppProvider does not localize the language. No matter which language is specified, the display will always be in English. I have specified the following
By the way, this is the same issue that was described on issue #60
That old issue mentioned that the problem was presumably caused by the way the i18nManager was loading the locales, which was specifically for Webpack. However, it should be also compatible with Vite as this is the way latest Shopify CLI scaffolds a fresh new app.

I'm using latest code and followed official documentation (check steps below)

Expected behavior

When creating a new discount, texts should be localized and shown in specified supported locale, e.g., spanish.

Actual behavior

When creating a new discount, texts are not localized and always showing english (fallback)

Steps to reproduce the problem

  1. Create an app using latest Shopify CLI (3.62.0) with Remix template, as explained here
  2. Follow the tutorial here (Javascript selected as language):
  3. Build UI according to this doc
  4. Execute npm install && npm run dev
  5. Change locale on app/components/providers/DiscountProvider.jsx as code below (anything different from english, such as "es-AR" or "es")
import { AppProvider } from "@shopify/discount-app-components";
import "@shopify/discount-app-components/build/esm/styles.css";
export function DiscountProvider({ children }) {
  return (
    <AppProvider locale="es-AR" ianaTimezone="America/Buenos_Aires">
      {children}
    </AppProvider>
  );
}
  1. Try to create a new discount using this new app
  2. Confirm locale is still english (for components that come within this package)

Specifications

  • Are you using the React components? (Y/N): Y
System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 2.34 GB / 15.47 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
  Browsers:
    Chrome: 116.0.5845.110
    Chromium: 126.0.6478.55
  npmPackages:
    @shopify/discount-app-components: ^3.0.0 => 3.0.0 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.2.0 => 18.3.1 

Thank you in advance!

@mcorraodab mcorraodab added the bug Something isn't working label Jun 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant