Open vhoyer opened 3 years ago
when I try to load a component with UI in
wrapPageElements
that usesuseIntl
, 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
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?
when I try to load a component with UI in
wrapPageElements
that usesuseIntl
, this fails saying that the component is not a decendant of IntlProvider;