Gatsby language localization Mdx files with gatsby-plugin-intl

Question

I am trying to localize pages with gatsby-plugin-intl. No problem for .js files as I described below but how should I make it for .mdx files?

import React from "react"
import { FormattedMessage, injectIntl, navigate } from "gatsby-plugin-intl"

const MyPage = ( {intl} ) => (
  <Layout>
     <h2><FormattedMessage id="TITLE"/></h2>
  </Layout>
)

export default injectIntl(MyPage)

I am trying to make the similar logic here:

---
name: Settings
route: /documentation/settings
---

import { Playground, Props } from 'docz'
import { useIntl, Link, FormattedMessage } from "gatsby-plugin-intl"

const intl = useIntl()

## Settings

intl.formatMessage({ id: "TITLE"})

score 0 · Answer 1 · answered Nov 16 '20 at 09:36

every think look right but you have an error on the mdx file

const intl = useIntl()

use the FormattedMessage components instead message example

<FormattedMessage id="TITLE" />

or your components

<Yourcomponents title={useIntl().formatMessage({ id: "TITLE" })} />

don't use const

Gatsby language localization Mdx files with gatsby-plugin-intl

1 Answers1