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

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 join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug 🐛 Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant