microapps/gatsby-plugin-react-i18next

languages from useI18next() contains only 1 language

gabric098 opened this issue · 6 comments

gabric098 commented

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 commented

same issue here , and I found it can get two in pages/index , but can only get one in component/Header/index
try to find what's wrong too ;(
any help/suggestions welcome

Dennnnny commented

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 ;(

  • 👍1
Dennnnny commented

I think I found some solution, maybe could work.
so, I found it in someone else blog structure.
It's gatsby-browser file :

I change mine to :

export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = ({
  props,
  element,
}) => {
  return React.cloneElement(
    element, // I18nextProvider
    props,
    element.props.children &&
      React.cloneElement(
        element.props.children, // I18nextContext.Provider
        element.props.children?.props,
        React.createElement(
          Container,
          props,
          element.props.children?.props.children
        )
      )
  );
};

and this work foe me.
It's a typescript version btw.
hope it works for you too

  • 🎉1
gabric098 commented

Hey @Dennnnny It does work indeed! would you mind sharing the source where you found an example of this solution? I can't quite figure out why it's working.

Thank you!

gabric098 commented

Thank you @Dennnnny, really appreciated