Need help with why the interpolate warning is showing

[edwardspresume]

I am getting this warning: WARNING(astro-i18next): default slot does not include any HTML tag to interpolate! You should use the t function directly.

I am not share which line of code it's coming from. Is there a way I can add a debug option? this is my astro-i18next.config.ts

import type { AstroI18nextConfig } from 'astro-i18next';

const config: AstroI18nextConfig = {
    defaultLocale: 'en',
    locales: ['en', 'ht'],
    namespaces: [
        'home',
        'media',
        'volunteer',
        'join',
        'donate',
        'navigation',
        'footer',
        'common',
    ],
    routes: {
        ht: {
            media: 'media',
            request: 'request',
            volunteer: 'volunteer',
            join: 'join',
            donate: 'donate',
            tos: 'tos',
        },
    },
};

export default config;

And I assume that some of the warning might be coming from my SubMenu file:

---
import { Trans } from 'astro-i18next/components';

export interface Props {
    submenu_data_name: string;
}

const { submenu_data_name } = Astro.props;

const uscis_links = [
    {
        name: 'Travel Document',
        url: 'https://www.uscis.gov/i-131',
    },
    {
        name: 'Employment Authorization',
        url: 'https://www.uscis.gov/i-765',
    },
    {
        name: 'TPS',
        url: 'https://www.uscis.gov/humanitarian/temporary-protected-status',
    },
    {
        name: 'Citizenship Application',
        url: 'https://my.uscis.gov/citizenship/what_to_expect',
    },
    {
        name: 'N 400',
        url: 'https://www.uscis.gov/n-400',
    },
    {
        name: 'Government Fees',
        url: 'https://rapidvisa.com/government-fees/',
    },
];

const info_links = [
    {
        name: 'What Are the Four Types Of Immigration?',
        url: 'https://nelsonimmigrationlaw.com/what-are-the-four-types-of-immigration/',
    },
    {
        name: 'Asylum Seeker',
        url: 'https://www.nyc.gov/site/immigrants/help/asylum-seekers/asylum-seekers-help.page',
    },
];
---

<menu role='list' id={`${submenu_data_name}_submenu`} class='submenu'>
    {
        submenu_data_name === 'uscis' &&
            uscis_links.map((link) => (
                <li>
                    <a href={link.url}>
                        <Trans
                            i18nKey={`uscis_links.${link.name}`}
                            ns='navigation'>
                            {link.name}
                        </Trans>
                    </a>
                </li>
            ))
    }

    {
        submenu_data_name === 'info' &&
            info_links.map((link) => (
                <li>
                    <a href={link.url}>
                        <Trans
                            i18nKey={`info_links.${link.name}`}
                            ns='navigation'>
                            {link.name}
                        </Trans>
                    </a>
                </li>
            ))
    }
</menu>

Please let me know if more info is needed

[yassinedoghri]

Hey @edwardspresume, thanks for the post!

As mentioned in the warning, you can try to use the t function instead of the <Trans/> component like so:

---
import { t } from 'i18next';

export interface Props {
    submenu_data_name: string;
}

const { submenu_data_name } = Astro.props;

const uscis_links = [
    {
        name: 'Travel Document',
        url: 'https://www.uscis.gov/i-131',
    },
    {
        name: 'Employment Authorization',
        url: 'https://www.uscis.gov/i-765',
    },
    {
        name: 'TPS',
        url: 'https://www.uscis.gov/humanitarian/temporary-protected-status',
    },
    {
        name: 'Citizenship Application',
        url: 'https://my.uscis.gov/citizenship/what_to_expect',
    },
    {
        name: 'N 400',
        url: 'https://www.uscis.gov/n-400',
    },
    {
        name: 'Government Fees',
        url: 'https://rapidvisa.com/government-fees/',
    },
];

const info_links = [
    {
        name: 'What Are the Four Types Of Immigration?',
        url: 'https://nelsonimmigrationlaw.com/what-are-the-four-types-of-immigration/',
    },
    {
        name: 'Asylum Seeker',
        url: 'https://www.nyc.gov/site/immigrants/help/asylum-seekers/asylum-seekers-help.page',
    },
];
---

<menu role='list' id={`${submenu_data_name}_submenu`} class='submenu'>
    {
        submenu_data_name === 'uscis' &&
            uscis_links.map((link) => (
                <li>
                    <a href={link.url}>{t(`uscis_links.${link.name}`, { ns: 'navigation' })}</a>
                </li>
            ))
    }

    {
        submenu_data_name === 'info' &&
            info_links.map((link) => (
                <li>
                    <a href={link.url}>{t(`info_links.${link.name}`, { ns: 'navigation' })}</a>
                </li>
            ))
    }
</menu>

Hope it helps!

[edwardspresume]

Worked like a charm, thank you!