extraction not working for TransComponent

[KingMatrix1989]

Describe the bug

I use next-i18next plugin and extraction not working for TransComponent, while t function works as well.

How to reproduce

Babel configuration:

module.exports = {
  presets: [['@babel/preset-typescript']],
  plugins: [
    ['@babel/plugin-syntax-flow'],
    [
      'i18next-extract',
      {
        locales: ['en', 'fa'],
        useI18nextDefaultValue: ['fa'],
        keyAsDefaultValue: ['en'],
        defaultNS: 'common',
        // discardOldKeys: true,
        outputPath: './public/locales/{{locale}}/{{ns}}.json',
      },
    ],
  ],
};

Reproduction:

const MyComponent = () => {
     return (
         <Trans>Hello world</Trans>
     )   
}

Expected behavior
new keys in common.json (as default namespace):

"Hello World": "Hello World"

[ddx32]

I'm observing the same issue. No custom Trans components, no obscure settings. "@babel/[email protected]", "[email protected]" The extraction from t() functions works really solid, though!

I've got no development experience with Babel, but based on my brief debugging session today it seems that the JSXElement function in the Visitor object doesn't trigger in my project, so extractTransComponent is completely ignored. I'll try to put together a minimal reproduction later today.

---

Update: I wasn't able to reproduce the bug in a clean project neither using only Babel transpilation, nor using babel-loader in webpack. I'll keep digging what causes it in my project, but I sense some sort of conflict.

[ddx32]

@skmohammadi does your project happen to use webpack and TypeScript? The trouble in my setup was using the "jsx": "react-jsx" compiler option when using ts-loader ahead of babel-loader. This way the TypeScript compiler transforms the <Trans> components before Babel can recognize them as JSX elements. The solution was to set the jsx option to preserve and enable @babel/preset-react afterwards.

[KingMatrix1989]

@ddx32 Hi. Its may.
The project is configured to use Webpack and TS, but in tsconfig.json, jsx is set to preserve and @babel/preset-react is not used.

[lelamk140]

Have same problem with the preset next/babel. Don't understand since plugins executing before preset according babel.

Also preserve set in tsconfig.json. babel preset-react is used in next/babel, so maybe it related?

[lelamk140]

Resolved. I before autocomplete import of Trans as component from next-i18next, change import to import { Trans } from 'react-i18next' fix it.

Hope this help someone else to save some time. (too late for me 🤣 )

Also possible use next-i18next by adding customTransComponents like here with customUseTranslationHooks