if no manual explicit id is added: [React Intl] An id must be provided to format a message.

[mudrz]

Which package?
react-intl

Describe the bug
Following the steps in the docs results in an error:
https://formatjs.io/docs/getting-started/message-distribution

import {createIntl, createIntlCache} from 'react-intl';

function loadLocaleData(locale: string): Promise<Record<string, string>> {
  switch (locale) {
    case 'fr':
      return import('compiled-lang/fr.json');
    default:
      return import('compiled-lang/en.json');
  }
}

// A single cache instance can be shared for all locales
const intlCache = createIntlCache();

async function bootstrapApplication(locale) {
  const messages = await loadLocaleData(locale);
  const intl = createIntl({locale, messages}, intlCache);
  intl.formatMessage(
  {
    description: 'A message',
    defaultMessage: 'My name is {name}',
  },
  {
    name: 'MyName',
  }
);
}

To Reproduce
Steps to reproduce the behavior:

• extract formatjs extract 'src/**/*.ts*' --out-file src/lang/en.json
• translate generated files
• compile formatjs compile 'src/lang/en.json' --ast --out-file src/lang/compiled/en.json && formatjs compile 'src/lang/fr.json' --ast --out-file src/lang/compiled/fr.json
• run main file bootstrapApplication

Error: [React Intl] An `id` must be provided to format a message.                                                  
     at Object.invariant (/Users/mudrz/projects/nodetests/i18n/node_modules/@formatjs/intl-utils/src/invariant.js:6:15)
     at formatMessage (/Users/mudrz/projects/nodetests/i18n/node_modules/react-intl/src/formatters/message.js:71:18)

It is fixed if I manually add an id to the message, but the docs state that this is discouraged

[longlho]

Thanks a lot for reporting. https://formatjs.io/docs/guides/bundler-plugins should have the details on how to fix that. I'll revisit the doc to make it clearer.

[mudrz]

thanks Long Ho, didn't realise this

[mdshifut]

@longlho I'm facing the same problem. It should produce a dynamic id if I omit explicit id but it throws the flowing error
Error: [@formatjs/intl] An id must be provided to format a message.

I have tried to run this example from the docs but it's not working although explicit ids are discouraged in the docs.

Here are my source codes you may check
Is there any way to omit this error?

[luismasserral]

@mdshifut I had the same problem and I finally made it work. In my case I was using create-react-app with react-intl and had the same problem as you:

Error: [@formatjs/intl] An id must be provided to format a message.

After some researching I found the solution. You have to install react-app-rewired and customize-cra packages, which allows you to modify your create-react-app configuration (more info here):

npm i -D customize-cra react-app-rewired

After that, create a file in the root of the project named config-overrides.js with this same content:

const { addBabelPlugins, override } = require('customize-cra');

module.exports = override(
  ...addBabelPlugins([
    'react-intl',
    {
      idInterpolationPattern: '[sha512:contenthash:base64:6]',
      extractFromFormatMessageCall: true,
      ast: true,
    },
  ])
);

And with that the react-intl plugin configuration is injected into create-react-app and the id error is gone and everything works fine! 👍

[AVAVT]

Having the same problem on CRA. @luismasserral 's solution doesn't work either.

I've even tried ejecting CRA and config babel explicitly but it still tell me id must be provided.

[longlho]

Do you have a repro?

[mdshifut]

Hi @AVAVT ,

I solve this problem using customize-cra, and react-app-rewired packages. You can override the babel configuration using those packages.

[AVAVT]

Hi @AVAVT ,

I solve this problem using customize-cra, and react-app-rewired packages. You can override the babel configuration using those packages.

@mdshifut Yes, I have tried that, but it doesn't work. You can see the repo below where I applied that solution without success.

Do you have a repro?

@longlho Sorry it took so long to reply. I had to strip down the confidential codes. Here's the repo: https://github.com/AVAVT/reactintl-test

I've only added a test FormattedMessage in src/routes/Login.tsx.

IntlProvider related code is in App.tsx

[longlho]

@AVAVT can u create a separate GH issue?

[florianmartens]

Is there any way to solve this without using react-app-rewired? Or is there something planned that will allow us to use auto-generated ids natively in the future?

[longlho]

@florianmartens can u clarify auto-generated ids natively?

[florianmartens]

Hey @longlho, thanks for the answer. I think that cra is the most popular react boilerplate and obviously you have no influence on their Babbel config.

I think having auto-generated keys has a lot of advantages - so I'd love to use that option. At the same time, I'm hesitant to use react-app-rewired. I'd love to be able to use auto-generated keys out of the box (natively for cra).

Maybe the extract script could just check if ids are generally present and if not default to an auto-generation approach. This would also prevent mixed approaches. But I'm putting this idea out there without looking at the source code.

[longlho]

The issue is that extraction cannot modify the transpilation process which CRA controls, thus cannot inject IDs.

[maciej-gurban]

Stumbled upon this when looking for ways to setup a project not using create-react-app to alow for the simple { key: 'value }` syntax of defining messages. Reading the docs, they would have believe that would be supported out of the box, but trying to run the config with default plugin config, as well as with some of the examples here doesn't work for me.

Could you please provide a link to a demo/code sandbox/documentation which shows what babel configuration should support the short defineMessages() syntax for use cases of frontend app using react, babel and webpack?

[longlho]

Hmm we don't support declaring messages with just key value

[kkuzmina]

Has there been any update on this?

I've tried both solutions updating .babelrc as described in https://formatjs.io/docs/guides/bundler-plugins/ as well as override in config-overrides.js which didn't help so now my only solution is to add the ids manually

[longlho]

@kkuzmina are you using create-react-app?

[kkuzmina]

@longlho Originally used create-react-app to build the app but I'm now using react-app-rewired

[longlho]

Do u have a reproducible repo?

[longlho]

@kkuzmina
react-app-rewired doesn't seem to support CRA4 so I put in an example using rescripts: https://github.com/formatjs/formatjs/tree/main/packages/react-intl/example-sandboxes/rescripts

[ManuDoni]

Hi, does anyone know if there is a solution using craco?
Update: solved!
Added the code below to craco.config.js

    babel: {
        plugins: [
            [
                "formatjs",
                {
                    "idInterpolationPattern": "[sha512:contenthash:base64:6]",
                    "ast": true
                }
            ]
        ]
    }

[Jakub41]

Hello,

I have the same issue mentioned above but none of the soutions proposed worked for me.

Can you please have a look into my repo?
https://github.com/Jakub41/library-to-build-forms

I have no idea waht to do more :(

Please help thank you