Require inside function

[mkosir]

It's not really an issue, more of a question, since I tackle with it quite some time. In my example where I have pretty big object defined in separate file, which doesn't get translated if I require/import it on the top of some another file, but it only works if I do that inside of a function, so it's kind of a lazy loading. I assume webpack is configured like this, but haven't dive into the code, so just wondering why it doesn't work with requiring or (even better) importing it at the top?

btw great library, was really looking something to use gettext with react apps.

[AlexMost]

Hi @markokosir! Glad that you have found our tool useful and thanks for the report! An issue, that you described, happens because i18n initialization happened after the module import. I think it happens, because webpack concatenates modules, and we can not rely on imports execution order. I have, met this issue also, and current workaround is to wrap that object with translations with function, something like:

export const TRANSLATIONS = () => ({
   blabla: t`blabla`
})

// usage
import { TRANSLATIONS } from './dict';
TRANSLATIONS().blabla

That still seems like a workaround for me, and I am going to investigate how we can configure webpack to execute i18n initialization logic before others modules execution. Going to write feedback here as soon as I will have some results.

Will be also glad to hear any ideas or suggestions about how we can solve this issue.

[AlexMost]

You can also try to place all your i18n init logic in a separate module and execute translations initialization as the first import in your entry file. Here you can see an example - https://github.com/ttag-org/CRA-runtime-example/blob/master/app/src/index.js#L1. Please, let me know if that works for you.

[mkosir]

You can also try to place all your i18n init logic in a separate module and execute translations initialization as the first import in your entry file. Here you can see an example - https://github.com/ttag-org/CRA-runtime-example/blob/master/app/src/index.js#L1. Please, let me know if that works for you.

Great, this solution works like a charm, thank you! I would recommend that "init logic" is kind of it's own chapter in the docs, because I think a lot of developers will implement initialization logic in the constructor or somewhere similar like I did.

[AlexMost]

@markokosir glad that it worked! I have created a separate task for documentation improvement - https://github.com/ttag-org/ttag/issues/150.