Not being able to setup gatsby-plugin-react-i18next

[m-medeiros1]

Hi everyone!

I'm trying to setup the plugin on a website but it doesn't seem to work. I already followed multiple setup guides but no success so far.

My gatsby-config:

{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/locales`,
        name: `locale`
      }
    },
    {
      resolve: 'gatsby-plugin-react-i18next',
      options: {
        languages: ["en", "es", "pt"],
        defaultLanguage: "en",
        siteUrl: "https://siteurl.com/",
        i18nextOptions: {
          // debug: true,
          fallbackLng: defaultLanguage,
          supportedLngs: languages,
          defaultNS: 'common',
          interpolation: {
            escapeValue: false, // not needed for react as it escapes by default
          }
        },
      },
    },

My folder structure:

| locales
| - en
| - - common.js
| - es
| - - common.js
| - pt
| - - common.js
| src
| - home.js
| gatsby-config
| languages.js

How I'm trying to pull the data in a page:

import { useTranslation, Trans } from "gatsby-plugin-react-i18next"
import { graphql } from "gatsby"

const Home = () => {
  const { t } = useTranslation('translations')
  ...
  //Tried both ways, neither works
  <Trans i18nKey="Open a new chapter in technology" > Open a new chapter in technology </Trans>
  <h1> {t('Open a new chapter in technology')} </h1>
  ...
}

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

The only information/insight about why it is not working is this message in DevTools:

No translations were found in "locales" key for "/". 
You need to add a graphql query to every page like this:

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

I obviously tried also with this query in the page, but the same error message appears and nothing changes.

The language switcher seems to be working (url changes on click) but nothing beyond that.

Any help would be highly appreciated as we have been stuck with this issues for a while already and no hint as to where to go next.

[hanaakhojhove]

having the same issue here !!!

[jishnupsamal]

Same here. Any solution @m-medeiros1 @hanaakhojhove?

[trihargianto]

Same here 😅

[alanhchoi]

I resolved this error by adding this GraphQL query to a page as written in the readme page.

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