Json key not generated for fields defined by defineMessages from gatsby-plugin-intl

[Tbaut]

Thanks for this great plugin! I run into problems with gatsby and TS, any help or pointer would be greatly appreciated.

• version: 4.1.1
• node version: 12.4
• npm (or yarn) version: yarn 1.22.4

Do you want to request a feature or report a bug?: bug

What is the current behavior?: I import defineMessages from gatsby-plugin-intl, not from react-intl.
When running

extract-messages -l=en,fr -o src/intl -d en --flat false './src/pages/**/!(*.test).tsx'

on a page containing:

import { useIntl, FormattedMessage, defineMessages } from "gatsby-plugin-intl";

  const intl = useIntl();
  const messages = defineMessages({
    description: {
      id: "about.description",
      defaultMessage: "this description isn't picked up",
      values: {
        newline: <br />,
      },
    },
  });

  return (
        <h1 className="title">
          {intl.formatMessage({
            id: "about.title",
            defaultMessage: "About me",
          })}
        </h1>
        <FormattedMessage {...messages.description} />
  )

it detects and generates only the title, not the description message:

// en.js
{
  "about": {
    "title": "About me"
  }
}

What is the expected behavior?: I would expect:

// en.js
{
  "about": {
    "title": "About me",
    "description": "this description isn't picked up",
  }
}

[lunar-debian]

Could you try with the following .babelrc?

{
  "presets": [["babel-preset-gatsby"]],
  "plugins": [
    [
      "react-intl",
      {
        "moduleSourceName": "gatsby-plugin-intl"
      }
    ],
    [
      "react-intl-auto",
      {
        "moduleSourceName": "gatsby-plugin-intl"
      }
    ]
  ]
}

With this, it works on my side. I think there's probably a bug somewhere that made the need for such a configuration, but I've been struggling to figure out what's going on.

[Tbaut]

Thanks for you reply, For the record, this was my babel.config.js:

module.exports = function (api) {
  api.cache(true);

  return {
    presets: ["@babel/preset-react", "@babel/preset-typescript", "babel-preset-gatsby"]
  }
};

Unfortunately following your suggestion, adding the plugins in babel config (also I had to install babel-plugin-react-intl-auto), this did not solve the problem.

[Tbaut]

Just to narrow down the problem a little, in my example from the first post, whether I use intl.formatMessage or the JSX component FormattedMessage doesn't matter, both:

import { useIntl, defineMessages } from "gatsby-plugin-intl";

  const intl = useIntl();
  const messages = defineMessages({
    description: {
      id: "about.description",
      defaultMessage: "this description isn't picked up",
      values: {
        newline: <br />,
      },
    },
  });

...

  {intl.formatMessage(messages.description)}

and

import { FormattedMessage, defineMessages } from "gatsby-plugin-intl";

  const messages = defineMessages({
    description: {
      id: "about.description",
      defaultMessage: "this description isn't picked up",
      values: {
        newline: <br />,
      },
    },
  });

...

<FormattedMessage {...messages.description} />

yield the same result: no description field is created in translation's JSONs.