languages from useI18next() contains only 1 language

I’m running gatsby 4.12.1 with react 18.2.0 using latest version of gatsby-plugin-react-i18next. I followed the examples included in the plugin. When I try to obtain the list of available languages using the following code:

const {languages, originalPath} = useI18next();

I keep getting only ['en'] in the languages array even if there’s no en language defined in my setup.

Here’s how my gatsby-config.js looks like:

...
  plugins: [
{
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/locales`,
        name: `locale`
      }
    },
    {
      resolve: `gatsby-plugin-react-i18next`,
      options: {
        localeJsonSourceName: `locale`,
        languages: [`de`, `es`],
        defaultLanguage: `de`,
        siteUrl: `http://localhost:8000/`,
        i18nextOptions: {
          interpolation: {
            escapeValue: false 
          },
          keySeparator: false,
          nsSeparator: false
        },
      }
    }
]
...

I’ve created the following files:

• locales/de/translation.json
• locales/es/translation.json

All seems to be working fine, If I access http://localhost:8000/ I get the German translations, If I access http://localhost:8000/es I get the Spanish. However, when I try to list the available languages by using the following code:

const {languages, originalPath} = useI18next();

no matter what, languages always contains a single element en.

Does anyone have any idea about what I’m doing wrong?

[Dennnnny]

@gabric098 here’s what I found : https://andremonteiro.pt/gatsby-i18next-wrap-page-element/

[Dennnnny]

I think it’s because of my gatsby-browser.tsx. so I can not access the whole languages. but, still I don’t know how to fix this yet, keep working on it 😭