Link component error: "Cannot read property 'language' of undefined"

[forxtu]

Hi!

I'm trying to use Link component from gatsby-plugin-intl and got an error:

• The above error occurred in the <LocationProvider> component
• Cannot read property 'language' of undefined

I cloned repo with example and everything works fine, but not in my project :(

Could it be a conflict with other libraries?

Thank you!

[forxtu]

As a workaround:

• Use Link component from gatsby
• Pass language from pageContext via react context
• Take language from context when needed
• Conditionally add language prefix (eg. "en") to the links

[wiziple]

That's what exactly the Link component from gatsby-plugin-intl does. You can check the component code.

https://github.com/wiziple/gatsby-plugin-intl/blob/master/src/link.js#L6

[bakate]

hello! I'm dealing with the same issue!

• Cannot read property 'language' of undefined

[sebastijandumancic]

Ran into this issue today, after building almost a whole app. What gives?

[sebastijandumancic]

Hey all, the issue is following:

Link imported from gatsby-plugin-intl doesn't work on components, only in pages listed in pages folder. In order to fix this, I've written a to string in Link component like this:

to={${intl?.locale}/privacy-policy}

I'll try to submit a PR for this if it can be fixed in the plugin itself. Cheers.

And an update: Yup, this doesn't work as well, intl object is not available in the layout or any component nested from gatsby-browser file.

[pepjo]

I was trying to use the Link component in a layout, and I was having this issue. The issue disappeared when I moved the gatsby-plugin-intl in gatsby-config.js after gatsby-plugin-layout.

[kinafu]

I was just about setting up the project, when I encountered the issue. For me the problem was, that in gatsby-config.js I used resolve: `gatsby-plugin-react-intl`, instead of resolve: `gatsby-plugin-intl`,. Now it works, the plugin's config is the last entry in my gatsby-config.js.