Messages not being extracted when using React hook only

[ramsy-leftclick]

Which package?
babel-plugin-react-intl

Describe the bug
When I use the React hook for translating my text in components directly the messages do not get extracted.

To Reproduce

1. Use the following code in your component

const {formatMessage: f} = useIntl()
...
return <span>{f({id: 'notExtracted', defaultMessage: 'This is not extracted'})}</span>
...

2. Run babel-plugin-react-intl

Expected behavior
I expected these messages to be extracted in the configured folder (eg. /build/messages/src/...)

Screenshots
n/a

Desktop (please complete the following information):

• OS: Latest Ubuntu
• Browser: Latest Firefox

Additional context
When using the component the messages get extracted successfully.

[longlho]

yes we right now do not support scraping formatMessage alias to another function right now.

[mcalthrop]

This also applies to the formatjs CLI when using the useIntl React hook of course.

Example (contrived) of code for which the formatjs cli does not extract translation id:

import React from 'react';
import { useIntl } from 'react-intl';

const MyComponent = () => {
  const { formatMessage } = useIntl();
  const altText = formatMessage({
    id: 'page.image.altText',
    defaultMessage: 'image text for accessibility',
  });
  return <img src="/path/to/image.png" alt={altText} />;
};

[mcalthrop]

@longlho I don't suppose you have an ETA on this?

I'll have a look at the code when I can, but I'm slammed atm.

[cinan]

I can still reproduce the bug. Example repo. npx formatjs extract index.tsx output:

[
  {
    "id": "a.b"
  }
]

expected:

[
  {
    "id": "a.a"
  },
  {
    "id": "a.b"
  }
]

[longlho]

You need this flag https://formatjs.io/docs/tooling/cli/#--extract-from-format-message-call

[Haraldson]

@longlho Has the work you did in 3f14e5d since been reverted or regressed somehow? I have an hours fresh npm install of @formatjs/cli, but no dice. I even tried --extract-from-format-message-call-stateless true after snooping around in that commit’s code, but that’s an unrecognized option. It’s pretty unclear where each bit of code lives and any connections between them – do I perhaps have to update any other @formatjs dependencies to get this working?

[adivfinitione]

@longlho have an idea why Firefox doesn't recieve the values?.

Code example (copy the code to local, the sandbox have different browser implemented):
https://codesandbox.io/s/old-pond-jzelfy?file=/src/index.js:0-341

Browser Info: Firefox v72.0.2 (64-bit)