Missing Key Error with gatsby-plugin-react-i18next

[lpieri]

I am encountering an issue with gatsby-plugin-react-i18next where it's not able to locate the translation keys in my JSON files. Despite having the translations defined in my JSON files, I keep getting a missingKey error.

Error Message:

i18next::translator: missingKey fr translation welcome welcome

Relevant Configuration:

Gatsby Config:

// Gatsby Config Excerpt
const config: GatsbyConfig = {
  // ...other configurations...
  plugins: [
    // ...other plugins...
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        name: 'locale',
        path: `${__dirname}/src/locales/`
      },
      __key: "locale"
    },
    {
      resolve: '@herob/gatsby-plugin-react-i18next',
      options: {
        languages: ["fr"],
        fallbackLanguage: "fr",
        trailingSlash: 'never',
        verbose: true,
        i18nextOptions: {
          debug: true,
          interpolation: {
            escapeValue: false,
          },
          keySeparator: false,
          nsSeparator: false,
        },
      }
    }
    // ...other plugins...
  ]
};

Component using the t function:

// React Component Excerpt
const Home: React.FC = () => {
  const { t } = useI18next();
  // ...other component logic...
  return (
    <Box>
      {/* ...other JSX... */}
      {t("welcome")}
      {/* ...other JSX... */}
    </Box>
  );
};

JSON File (locales/fr/index.json):

{
  "welcome": "Welcome on my website",
}

Attempted Solutions:

• Verified the JSON file path and format.
• Ensured the correct usage of the t function.
• Restarted the development server after changes.
• Checked for typos and syntax errors.

Despite these efforts, the issue persists. Any guidance or assistance in resolving this would be greatly appreciated.

Environment:

Gatsby version: "5.9.1"
gatsby-plugin-react-i18next version: latest

[brayanmedina35]

@lpieri to fix this issue each page needs a GraphQL query to load the location data.

export const query = graphql`
  query($language: String!) {
    locales: allLocale(filter: { language: { eq: $language } }) {
      edges {
        node {
          ns
          data
          language
        }
      }
    }
  }
`;