Components in wrapPageElement cannot access the current locale

[jasperanders]

I use a Layout Component with a navigation Bar. It is present at every route, so I put it at gatsby-browser.js like so

export const wrapPageElement = ({ element, props }) => {
  return <Layout {...props}>{element}</Layout>
}

No problem so far. If I try to get the locale in the Layout through const { locale } = useLocalization(); I get the wrong locale. This means that my Links redirect wrongly. Am I doing something wrong, or is this a bug?

Cheers

[tx0c]

I am hitting the same issue, within the Layout it seems getting locale from useLocalization always get the hard-coded default en not current user's browsing locale page, not my configured default either; believe it's a BUG

[tx0c]

after a look the code at https://github.com/gatsbyjs/themes/blob/master/packages/gatsby-theme-i18n/src/wrap-page-element.js ; I believe the reason is LocaleProvider is wrapped inside wrapPageElement, and hence beneath the Layout is wrapping, then all elements in Layout is outside of LocaleProvider getting all hard-coded en as default lang,

I strongly believe this plugin should use https://www.gatsbyjs.com/docs/reference/config-files/gatsby-browser/#wrapRootElement instead of wrapPageElement

BTW, it looks like this repo has many months issues and many PRs pending for months, wonder is it going out of maintenance? from this contributors graph it looks like very low activity since this year 2021 comparing last year

I'd like to make a PR to here but will need some maintainer's response anyway; /cc @LekoArts @theowenyoung ...

[cesarvarela]

Any updates on this? It looks like the Gatsby team is not very interested in supporting themes.