kiwicom/orbit

Transaltion always fallback to default

kouloughli-hemza opened this issue · 5 comments

kouloughli-hemza commented

Hello and thank you again for the great work you are doing,
i was trying to work on translation in themeProvider for some of my components ,
since there is no example in stories for translation i tried using docs ,


import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
import fr_Fr from "@kiwicom/orbit-components/lib/data/dictionary/fr-FR.json";
       
<ThemeProvider theme={{orbit: customTokens, transitions: true}} dictionary={fr_FR} className="app">
 <div><Translate tKey="breadcrumbs_back" /></div>
</ThemeProvider>

it always print english text ,
i tried also with custom object inside themeProvider as in docs but still always refering to default language file,

Thank you

vepor commented

Hey @kouloughli-hemza, I've tried to duplicate this issue and it works for me.
You can check it in code sandbox: https://codesandbox.io/s/sweet-newton-kb5q3?file=/src/index.js

I would say that you have some issue in your implementation.

It should use the english translations only when some key is not translated for the specific language you want to use.

kouloughli-hemza commented

Hey @kouloughli-hemza, I've tried to duplicate this issue and it works for me.
You can check it in code sandbox: https://codesandbox.io/s/sweet-newton-kb5q3?file=/src/index.js

I would say that you have some issue in your implementation.

It should use the english translations only when some key is not translated for the specific language you want to use.

i can see the difference now ,
im using Translate under :
import {Translate } from "@kiwicom/orbit-components"; while you are using
Translate from
import Translate from "@kiwicom/orbit-components/lib/Translate";
is there any difference ?
because i always import components from orbit-components .

vepor commented

You're right @kouloughli-hemza . It seems that there's some problem. We'll check it and give you more info – there should be no difference in the behavior.

kouloughli-hemza commented

You're right @kouloughli-hemza . It seems that there's some problem. We'll check it and give you more info – there should be no difference in the behavior.

Thank You ,

silvenon commented

Hey @kouloughli-hemza 👋 The problem is mixing imports from @kiwicom/orbit-components and @kiwicom/orbit-components/lib/*. webpack supports ES modules, so when you import from @kiwicom/orbit-components, webpack automatically uses our ES build, but when you import from @kiwicom/orbit-components/lib/ThemeProvider, that ThemeProvider is from our CommonJS build.

The solution is simply to import ThemeProvider like this:

import { ThemeProvider } from "@kiwicom/orbit-components"

and make sure you always import from that source, it's an all-or-nothing kind of thing.

In your case the problem is that CJS ThemeProvider and ES ThemeProvider are two different components. You're setting the context with CJS ThemeProvider, but your ES Translate component is reading context from ES ThemeProvider, and because that context isn't being set, it defaults to English.

Let us know if it's clear now 😉

  • ❤️1