Better error message for: Invariant Violation: [React Intl] An `id` must be provided to format a message. #1059

frozenfung · 2017-11-03T04:11:00Z

Is this a BUG REPORT or FEATURE REQUEST? (choose one)

Feature.

If this is a FEATURE REQUEST, please:

Describe in detail the feature/behavior/change you'd like to see.
-->

Something I forget implement the default locale or maybe misspell one of them, in this hole I will get a notice like:

Invariant Violation: [React Intl] An id must be provided to format a message.

However, I think the message could be more helpful if we supply exactly what the missing attribute is, right?

p.s. I have not read the code yet so I do not know if this is doable or not, but if it is I am glad to submit a PR for this.

Expected behavior

Supply with a more detailed message, maybe:

Invariant Violation: [React Intl] An 'id' must be provided to format a message for key 'missLocaleKey'.

The text was updated successfully, but these errors were encountered:

papasmile · 2017-12-02T19:06:01Z

Can you be a little more specific about your problem? Locale is set on IntlProvider, not FormatMessage. Usually you get that error when you pass an incorrect message key, so that has nothing to do with locale and is general. E.g., all those will give you a 'missing id' error:

intl.formatMessage({ defaultMessage: 'hi });
intl.formatMessage({ ids: 'xxx.yyy', defaultMessage': 'hi });
intl.formatMessage({ extrakey: { id: 'aaa.bbb', defaultMessage': 'hi } });

Maybe I'm missing which API call you are thinking of and you can share...

jdolinski1 · 2018-02-21T17:17:16Z

I think what everybody desires is more detailed Error info when non-existing id is provided to FormattedMessage, intl.formatMessage, etc.

Current error message when something got screwed:
[React Intl] An id must be provided to format a message. - No line number, no parent component name, nothing.

Desired error message:
[React Intl] Error occured in: <ComponentName> An id must be provided to format a message. You provided <id> which was not found in dictionary.

Is this actually doable or am i missing something?

Thanks

damiangreen · 2018-09-06T09:43:58Z

For anyone that lands here,

this can be caused by your message key not existing in your defineMessages object, can easily happen if you rename your key and not changing it in FormattedMessage.

justinkahrs · 2019-04-02T23:49:32Z

Any updates on this? Would be very helpful.

velidan · 2019-04-03T11:09:08Z

I'm also have this issue. It happens when I'm trying to define a template string in my "de" locale file.

	creditsMsgTemplate: {
		id: "_creditsMsg",
		defaultMessage:
			"{creditCount} { creditCount, plural, one {{credit}} other {{credits}}}"
	},

I don't need to have ID because I want to have exactly this defaultMessage to interpolate but it looks like there is no any other way to do it without this unnecessary ID.
So I'm receiving error about default fallback using because my DE locale fine has already the key creditsMsgTemplate

It's very annoying.

stale · 2019-06-02T11:22:23Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

justinkahrs · 2019-06-02T17:57:43Z

This isn't stale, it's just a request that hasn't seen any action.

redonkulus · 2019-06-02T18:35:33Z

The id is used as a lookup to find the message, so as of right now it’s required. If there is no ID supplied it’s hard to know what info to give. I’ve marked this as an enhancement so stalebot doesn’t close it again. But unless someone offers to help this probably will not get resolved.

pengpeng9413 · 2019-10-17T06:43:45Z

我遇到了同样的问题，但是由于代码的复杂，我并不知道其发生的细节与错误的定位，希望能提示更详细的错误，感谢

CodeForcer · 2020-01-04T09:10:28Z

I feel this is a really important issue. Often I'm dealing with huge files and somewhere in there a missing ID causes the page to occasionally crash.

Tracking down which ID is missing is really frustrating and something I regularly deal with. The only solution seems to be extensive manual testing

longlho · 2020-01-04T17:55:14Z

What’s your workflow? We have a linter that can address that

…

On Sat, Jan 4, 2020 at 4:10 AM Nathan ***@***.***> wrote: I feel this is a really important issue. Often I'm dealing with huge files and somewhere in there a missing ID causes the page to occasionally crash. Tracking down which ID is missing is really frustrating and something I regularly deal with. The only solution seems to be extensive manual testing — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1059>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AABQM34D3BIQSOEJBASAHVLQ4BHANANCNFSM4ECCRV4Q> .

atav32 · 2020-04-08T00:59:22Z

@longlho curious to know which linter you're referring to 😄

Is it this one https://github.com/calm/eslint-plugin-react-intl?

longlho · 2020-04-08T01:00:55Z

This is the one I'm referring to: https://www.npmjs.com/package/eslint-plugin-formatjs :)

mguida22 · 2020-06-10T01:36:33Z

@longlho is it possible to provide some more information on where the issue may be located as @jdolinski1 suggested?

I'd be happy to make a PR with changes!

Current error message when something got screwed:
[React Intl] An id must be provided to format a message. - No line number, no parent component name, nothing.

Desired error message:
[React Intl] Error occured in: <ComponentName> An id must be provided to format a message. You provided <id> which was not found in dictionary.

longlho · 2020-06-10T01:37:43Z

Our latest version has a proper stack trace & error code now

stale · 2020-06-25T02:48:53Z

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

slim-hmidi · 2020-07-22T10:37:19Z

The page hasn't been displayed when I accessed it the first time and I need to refresh it to display the compoents. How can I fix that issue?

longlho · 2020-07-22T14:13:02Z

@slim-hmidi please create another GH issue w/ repro link

TimDaub · 2021-03-30T13:19:34Z

I'm currently getting this message in node and I'm trying to figure out what I'm doing wrong.

const { createIntl, createIntlCache } = require("@formatjs/intl");
const cache = createIntlCache();
const msgObj = {
  locale: 'en-US',
  messages: {
    a6AoNm: [ { type: 0, value: 'bla' } ],
  },
  defaultLocale: 'en-US'
}

const intl = createIntl(msgObj, cache);
intl.formatMessage({defaultMessage: "bla"});

my stack trace

Error: [@formatjs/intl] An `id` must be provided to format a message.
    at Object.invariant (/Users/user/Projects/project/node_modules/@formatjs/ecma402-abstract/utils.js:87:15)
    at formatMessage (/Users/user/Projects/project/node_modules/@formatjs/intl/src/message.js:34:24)
    at Object.<anonymous> (/Users/user/Projects/project/src/bla/bla.js:8:6)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/user/Projects/project/scripts/bla/bla.js:16:22)

Any ideas how to fix this?

longlho · 2021-03-30T13:23:03Z

Did you add our babel-plugin-formatjs?

TimDaub · 2021-03-30T13:24:02Z

Did you add our babel-plugin-formatjs?

No. Is this how I'd do it?

longlho · 2021-03-30T13:30:45Z

In that case you can use https://formatjs.github.io//docs/tooling/linter enforce-id option and it'll autofix it. Otherwise you can transpile your code with either typescript or babel.

TimDaub · 2021-03-30T14:14:57Z

Thanks for the tip. I got it working with this minimal .eslintrc.js:

$ node --version
v14.16.0

module.exports = {
  root: true,
  parserOptions: {
    ecmaVersion: 9 // depends on your version of nodejs
  },
  plugins: ["formatjs"],
  rules: {
    "formatjs/enforce-id": [
      "error",
      {
        idInterpolationPattern: "[sha512:contenthash:base64:6]"
      }
    ]
  }
};

$ eslint \"src/**\" -c ./.eslintrc.js --fix

Now regarding this issue. I think many users of formatjs arrive at this issue from Google. I can only speak for myself, but I wish formatjs would have reminded me about configuring babel or eslint. However, from my stack trace, I rather concluded that something must be wrong with e.g. my messages file. Could format js thrown an error to inform the user to install e.g. an id enforcer like babel or eslint when it's clear that e.g. the messages file is not the issue?

fix #1059

longlho · 2021-03-30T14:23:01Z

yup good idea. I've clarified the err message

AndrewEastwood · 2022-12-15T13:46:01Z

does it mead that every time during development I have to run eslint --fix ?

longlho · 2022-12-15T13:52:26Z

U can setup ur ide to fix on save

stale bot added the wontfix label Jun 2, 2019

stale bot removed the wontfix label Jun 2, 2019

redonkulus added the enhancement label Jun 2, 2019

guico33 mentioned this issue Apr 11, 2020

Use a proxy for messages in order to know when trying to access a missing key #1618

Closed

stale bot added the wontfix label Jun 25, 2020

stale bot closed this as completed Jul 2, 2020

longlho added a commit that referenced this issue Mar 30, 2021

fix(@formatjs/intl): add more details to missing ID message

506779b

fix #1059

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Better error message for: Invariant Violation: [React Intl] An `id` must be provided to format a message. #1059

Better error message for: Invariant Violation: [React Intl] An `id` must be provided to format a message. #1059

frozenfung commented Nov 3, 2017 •

edited

Loading

papasmile commented Dec 2, 2017

jdolinski1 commented Feb 21, 2018 •

edited

Loading

damiangreen commented Sep 6, 2018 •

edited

Loading

justinkahrs commented Apr 2, 2019

velidan commented Apr 3, 2019

stale bot commented Jun 2, 2019

justinkahrs commented Jun 2, 2019

redonkulus commented Jun 2, 2019

pengpeng9413 commented Oct 17, 2019

CodeForcer commented Jan 4, 2020

longlho commented Jan 4, 2020 via email

atav32 commented Apr 8, 2020

longlho commented Apr 8, 2020

mguida22 commented Jun 10, 2020

longlho commented Jun 10, 2020

stale bot commented Jun 25, 2020

slim-hmidi commented Jul 22, 2020

longlho commented Jul 22, 2020

TimDaub commented Mar 30, 2021

longlho commented Mar 30, 2021

TimDaub commented Mar 30, 2021

longlho commented Mar 30, 2021

TimDaub commented Mar 30, 2021 •

edited

Loading

longlho commented Mar 30, 2021

AndrewEastwood commented Dec 15, 2022

longlho commented Dec 15, 2022

Better error message for: Invariant Violation: [React Intl] An id must be provided to format a message. #1059

Better error message for: Invariant Violation: [React Intl] An id must be provided to format a message. #1059

Comments

frozenfung commented Nov 3, 2017 • edited Loading

Is this a BUG REPORT or FEATURE REQUEST? (choose one)

Expected behavior

papasmile commented Dec 2, 2017

jdolinski1 commented Feb 21, 2018 • edited Loading

damiangreen commented Sep 6, 2018 • edited Loading

justinkahrs commented Apr 2, 2019

velidan commented Apr 3, 2019

stale bot commented Jun 2, 2019

justinkahrs commented Jun 2, 2019

redonkulus commented Jun 2, 2019

pengpeng9413 commented Oct 17, 2019

CodeForcer commented Jan 4, 2020

longlho commented Jan 4, 2020 via email

atav32 commented Apr 8, 2020

longlho commented Apr 8, 2020

mguida22 commented Jun 10, 2020

longlho commented Jun 10, 2020

stale bot commented Jun 25, 2020

slim-hmidi commented Jul 22, 2020

longlho commented Jul 22, 2020

TimDaub commented Mar 30, 2021

longlho commented Mar 30, 2021

TimDaub commented Mar 30, 2021

longlho commented Mar 30, 2021

TimDaub commented Mar 30, 2021 • edited Loading

longlho commented Mar 30, 2021

AndrewEastwood commented Dec 15, 2022

longlho commented Dec 15, 2022

Better error message for: Invariant Violation: [React Intl] An `id` must be provided to format a message. #1059

Better error message for: Invariant Violation: [React Intl] An `id` must be provided to format a message. #1059

frozenfung commented Nov 3, 2017 •

edited

Loading

jdolinski1 commented Feb 21, 2018 •

edited

Loading

damiangreen commented Sep 6, 2018 •

edited

Loading

TimDaub commented Mar 30, 2021 •

edited

Loading