Transaltion always fallback to default

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

[silvenon]

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 😉

[kouloughli-hemza]

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 ,