i18next / i18next-parser

Parse your code to extract translation keys/values and manage your catalog files
MIT License
466 stars 189 forks source link

Keys not being extracted when comment is inside React components #988

Open Myzel394 opened 4 months ago

Myzel394 commented 4 months ago

šŸ› 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

Myzel394 commented 3 months ago

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.