Typescript error when importing Trans component

[jesuslencina]

Hey! Just by importing the Trans component from @lingui/macro, I get the following error:

./src/components/Navbar/Navbar.tsx
TypeError: /pathToTheProject/src/components/Navbar/Navbar.tsx: Cannot read property 'path' of undefined

Importing the same from @lingui/react works, but I prefer to use the children prop, so any ideas?

EDIT: I've uploaded the project to codesandbox, for more context: https://codesandbox.io/s/d27fv?file=/src/components/Navbar/Navbar.tsx

It might be something dumb, but I've been trying to fix it very hard and in many different ways, so help would be greatly appreciated :')

[semoal]

Hola!

First thing I saw in your codesandbox, is that babelrc is not correct.
babel-preset-env and babel-prest-react are deprecated and shouldn't be used. In favor is @babel/preset-env and @babel/preset-react, create-react-app by default works out of the box with Lingui you don't need to modify any babel config.

Second thing: @lingui/macro package is not in the dependencies section and @lingui/core is required also. Make sure to get it installed.

Third thing: index.js should be an index.tsx and is not wrapping the <App /> component with the I18nProvider that makes @lingui global.

You can check our example in examples/create-react-app which uses create-react-app and find the main differences. Codesandbox created as front-end environment is not the best choice, you should choose Node environment because @lingui/cli needs node and one terminal to be run (lingui extract and lingui compile)

Anyways, feel free to reach me out through Discord and I'll help you more in detail if needed

Saludos!!

[jesuslencina]

Hey! Thank you very much for your answer :)

Even if those steps didn't solve the problem, there's one thing that is very likely to be causing the issue; When creating the project, I ran the create-react-app command without the typescript template flag, and then added all the typescript libraries manually (probably skipping many steps in between). I've decided to start it over using the CRA typescript flag.

Marking this as "solved" for now! Once again, thanks 👍🏽

PD: I couldn't find you on Discord, but I'd appreciate to be able to tell you how it goes once I get everything setup :)