Load component inside `wrapPageElement` fails

[vhoyer]

when I try to load a component with UI in wrapPageElements that uses useIntl, this fails saying that the component is not a decendant of IntlProvider;

[kzsa]

when I try to load a component with UI in wrapPageElements that uses useIntl, this fails saying that the component is not a decendant of IntlProvider;

Hi,

gatsby-config.js

plugins: [
  // Layout
  {
    resolve: `gatsby-plugin-layout`,
    options: {
      component: require.resolve(`./src/your-path-to/layout`),
    },
  },

  // Translation
  {
    resolve: `gatsby-plugin-react-intl`,
    options: {
      path: `${__dirname}/src/languages`,
      languages: [`hu`, `de`, `en`, `ru`],
      defaultLanguage: `hu`,
      redirect: true,
      redirectDefaultLanguageToRoot: true,
      ignoredPaths: [],
      fallbackLanguage: `en`,
    },
  },
]

en.json

{
    "pages": {
        "home": "Home"
    }
}

someComponent.js

//...
import { useIntl } from "gatsby-plugin-react-intl";
//...
const YourComponent = () => {
    const intl = useIntl();
    //...

    const someTextPlaceholder = intl.formatMessage({ id: "pages.home" });

    //...

console.log("My translated text in any language: ", someTextPlaceholder)

//...

export default YourComponent

languages.js

import React from "react";
import { IntlContextConsumer, changeLocale } from "gatsby-plugin-react-intl";

const languageName = {
  hu: "Magyar",
  de: "Deutsch",
  en: "English",
  ru: "Русский",
};

const Languages = () => {
  return (
    <div>
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) =>
          languages.map((language) => (
            <li
              key={language}
              onClick={() => changeLocale(language)}
              style={{
                color: currentLocale === language ? `red` : `var(--color)`,
                textDecoration: `underline`,
                cursor: `pointer`,
              }}
            >
              {languageName[language]}
            </li>
          ))
        }
      </IntlContextConsumer>
    </div>
  );
};

export default Languages;

I have done everything based on the example in this repo and it works great. Br: kzsa

[vhoyer]

Oh yeah, I've found another way to accomplish this same workaround to this issue (by creating a local plugin instead of using the gatsby-plugin-layout).

But still, those are just workarounds, right? I wish we had a solution to this problem.

I Imagine that loading the IntlProvider in the wrapRootElement instead of the wrapPageElement should do the trick, maybe... you know what I mean?