ttag-org / CRA-runtime-example

Example for usage ttag with CRA and runtime translations load
https://ttag-org.github.io/CRA-runtime-example/
2 stars 5 forks source link

Name collision with React Hooks #1

Open jonasdlindner opened 3 years ago

jonasdlindner commented 3 years ago

I tried the example with React Version "17.0.1" (Changed Version in package.json) and got the following error

Failed to compile.

src/i18nInit.js
  Line 20:3:  React Hook "useLocale" cannot be called at the top level. React Hooks must be called in a React function component or a custom React Hook function  react-hooks/rules-of-hooks

Search for the keywords to learn more about each error.
jonasdlindner commented 3 years ago

Solved by using another function-name in src/i18nInit.js

import { addLocale, useLocale as localize} from 'ttag';
import * as cookie from './cookie';

const LOCALE_COOKIE = '__locale';

function getLocale() {
  return cookie.get(LOCALE_COOKIE) || 'en';
}

export function saveLocale(locale) {
  cookie.set(LOCALE_COOKIE, locale);
}

// setup
const locale = getLocale();

if (locale !== 'en') {
  const translationsObj = require(`../i18n/${locale}.po.json`);
  addLocale(locale, translationsObj);
  localize(locale);
}