Skip to content
This repository has been archived by the owner on Jan 10, 2025. It is now read-only.

Translation Error with '@shopify/react-i18n' Package in Production Build #2690

Open
kmajay978 opened this issue Oct 17, 2023 · 0 comments
Open
Labels
Type: Bug 🐛 Something isn't working

Comments

@kmajay978
Copy link

I am using this package import { I18nContext, I18nManager } from '@shopify/react-i18n'; to translate my app.

It's working fine in case of dev environment, but once i make the build, it starts giving me error. and i am not able to figure out why it's causing an issue. Kindly help me out.

ERROR I am getting in react build

index-fd4376ff.js:40 TypeError: Cannot read properties of undefined (reading 'split')
    at nj (index-fd4376ff.js:41:445415)
    at eJ.setTranslations (index-fd4376ff.js:41:444597)
    at eJ.register (index-fd4376ff.js:41:443871)
    at VJ (index-fd4376ff.js:41:472576)
    at qi (index-fd4376ff.js:41:472268)
    at qJ (index-fd4376ff.js:41:488830)
    at fE (index-fd4376ff.js:38:19538)
    at I2 (index-fd4376ff.js:40:3139)
    at RI (index-fd4376ff.js:40:44830)
    at NI (index-fd4376ff.js:40:39787)

This is how i am using app js sample code
App.js

import {
  NavigationMenu,
  Provider as AppBridgeProvider,
} from "@shopify/app-bridge-react";
import { AppProvider as PolarisProvider, Frame } from "@shopify/polaris";

import { I18nContext, I18nManager } from '@shopify/react-i18n';

const [locale, setlocale] = useState('en');
const i18nManager = new I18nManager({
    locale,
    onError(error) {}
  });

return (
    <I18nContext.Provider value={i18nManager}>

In pages (Analytics ) this how i am using

import { useI18n } from '@shopify/react-i18n';
import en from "../translation/en.json";

const Analytics = () => {

  const [i18n] = useI18n({
    id: 'Translations',
    fallback: en,
    translations(locale) {
      // return locale === "en" ? en : es;
      return import(`../translation/${locale}.json`);
    }
  });

 return (
    <Page 
    backAction={{content: i18n.translate('Translations.analytics.heading'), onAction: () => navigate('/')}}
    title={i18n.translate('Translations.analytics.heading')}
    />
    
  >

Local SYSTEM
Windows 10
Node v16.15.0
Npm 9.5.0

Live SYSTEM
Ubantu 20.04
Node v16.20.1
Npm 8.19.0

@kmajay978 kmajay978 added the Type: Bug 🐛 Something isn't working label Oct 17, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Type: Bug 🐛 Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant