customTransComponents not working

[hazem3500]

Describe the bug I've made a custom local Trans component then added the path to it in my .babelrc, but after running the extraction script the keys in the Trans component don't get extracted

How to reproduce

Babel configuration:

{
    "presets": ["next/babel"],
    "plugins": [
        [
            "i18next-extract",
            {
                "locales": ["en", "ar", "de", "fr", "pt"],
                "defaultNS": "common",
                "outputPath": "public/static/locales/{{locale}}/{{ns}}.json",
                "enableExperimentalIcu": true,
                "jsonSpace": 4,
                "useI18nextDefaultValue": true,
                "customUseTranslationHooks": [["./i18n", "useTranslation"]],
                "customTransComponents": [["./i18n", "Trans"]]
            }
        ]
    ]
}

Reproduction:

// component file
import { Trans } from '../i18n'

export default function Test() {
    return (
        <Trans i18nKey="text">
            hello <i>locale</i>
        </Trans>
    )
}

// i18n.tsx
import NextI18Next, { InitConfig } from 'next-i18next'
import path from 'path'

const I18nInstance = new NextI18Next({
    otherLanguages: ['ar'],
    localePath: path.resolve('./public/static/locales'),
} as InitConfig)

export const {
    appWithTranslation,
    Link,
    Router,
    Trans,
    config,
    i18n,
    initPromise,
    useTranslation,
    withTranslation,
} = I18nInstance

export default I18nInstance

Expected behavior

The keys in the Trans component should be extracted

What actually happens

The keys weren't extracted

Your environment

• OS (e.g. ArchLinux): windows 10
• Plugin version (e.g. 0.3.0): 0.8.2
• Node version (e.g. 12.13.0): 14.8.0

[lelamk140]

Same issue, anyone resolved this or has some hints?

[quertenmont]

same for me. Would be nice to have it working!

[remimarsal]

In my case as I'm using TypeScript aliases, I solved it by providing the import name instead of the module path.

For example if you use import { T } from "my-custom-components"

<T>text</T>

Then you would provide customTransComponents: [["my-custom-components", 'T']]