Keys not being extracted when comment is inside React components

[Myzel394]

🐛 Bug Report

According to https://github.com/i18next/i18next-parser?tab=readme-ov-file#caveats, you need to write a comment and declare all your translation keys so that i18next-parser can pick them up correctly. When you use a comment inside a React evaluation, this doesn't seem to be working.

To Reproduce

const Component = () => {
    const myVariable = "a";  // "a" or "b" or "c"

    return (
        <div>
            {/* 
                t("Test.a")
                t("Test.b")
                t("Test.c")
            */}
            <span>{t(`Test.${myVariable}`)}</span>
        </div>
    );
};

Expected behavior

The keys Test.a, Test.b and Test.c should get extracted. However, they don't. The following example does work:

const Component = () => {
    const myVariable = "a";  // "a" or "b" or "c"

    /* 
                t("Test.a")
                t("Test.b")
                t("Test.c")
            */
    return (
        <div>
            <span>{t(`Test.${myVariable}`)}</span>
        </div>
    );
};

Your Environment

• runtime version: node v20.10.0
• i18next version: 23.10.0
• i18next-parser version: 8.13.0
• os: Mac
• any other relevant information

[Myzel394]

For anyone wondering why keys are not being recognized in the format of:

//t("key1")

you need to make sure to add a space between "//" and "t" 🤦 :

// t("key1")

this is something that should be mentioned in the docs.