Translation is not applied in simple TS

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]

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