Translation is not applied in simple TS

[lroellin]

We are using ttag in normal JSX and it works perfectly.

However, we're also loading some data from TS files and ttag does not work properly there.

Working example:

// Taste.tsx
<h2 className="title center-text">{t`Taste`}</h2>

Non-working example:

// (same file)
const getTastes = () => {
    return tastes.map((taste, index) => {
      return (
        <li className="tastes" key={index}>
          <Circle size="2em" color={taste.color} />
          <p className="option">{taste.name}</p>
        </li>
      );
    });
  };

<ul>{getTastes()}</ul>

// (Taste.ts)

export const TASTE = new Map<string, ITaste>([
  ['FLORAL', { name: t`Floral`, color: '#F3B8B7' }],

'Floral' is still showing up as the given text.

Some things seem to be working:

• Floral is extracted to the .po file
• Floral is in the JSON file with the translation
• In the output, there is no trace of the t

[AlexMost]

Hi @lroellin! I suppose the problem here is that this code is executed before ttag locale was applied:

export const TASTE = new Map<string, ITaste>([
  ['FLORAL', { name: t`Floral`, color: '#F3B8B7' }],

You should ensure that you call useLocale before any ttag functions are executed. You can look here for example: https://github.com/ttag-org/CRA-runtime-example/blob/master/app/src/App.js#L1

Here we are setting up the appropriate language in the first import of the app entry point:

import './i18nInit'

Please, let me know if that works for you.

Alternatively, you can also use function to execute t later:

export const TASTE = () => 

//...

[lroellin]

Thanks, that was indeed the fix!

As an idea: maybe there's a way to let users know this? I personally don't mind debug or error messages in the browser console if I as a developer mess something up.

[AlexMost]

@lroellin glad that it worked for you! 100% agree that we should inform users about that case. I have created a separate issue for this problem - https://github.com/ttag-org/ttag/issues/168

[thde]

Hey Alex, I'm working together with @lroellin on this.

We're already setting the language in the App.tsx file and I know this works because the language is correct for every string within a component (*.tsx). For the *.ts files (as mentioned above) it only works when explicitly setting the language there aswell.

Do you have any idea why? As I understand it, it should be sufficient to configure it in the App.tsx. 🤔

[AlexMost]

Hey @thde! Please, can you check that useLang is called before t tag executes? The problem that we discussed above was happening because strings that are wrapped with t executed before useLang call. Maybe you can also create some kind of the reproduce case to let me take a look closer to your issue?.

[lroellin]

Hi! We now fixed the issue by always setting the locale (we have a side-effecty import). Thanks!