Ember-intl 6.x crashes on empty translation keys

[IgnaceMaes]

• I am on the latest ember-intl version
• I have searched the issues of this repo and believe that this is not a duplicate

Issue

When upgrading to Ember 4.x the following ember-intl@5.7.2 issue triggers at runtime #1584. This was resolved by upgrading to version 6.0.0-beta.3.

Upgrading to version 6 however causes a different issue. When calling the translate function with an empty string it crashes. Looking at the release notes this behaviour isn't documented as a breaking change so I presume this is a bug?

Environment

• Ember Version: 4.4.2
• Ember CLI Version: 4.4.0
• Ember Intl Version: 6.0.0-beta.3
• Browser(s): Chrome
• Node Version: 14.19.1

Steps to Reproduce

1. Start a new Ember 4.4 app
2. Add ember-intl@6.0.0-beta.3
3. In the template, add {{t ""}}
4. This crashes the app:

[@formatjs/intl] An `id` must be provided to format a message. You can either:
1. Configure your build toolchain with [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin)
or [@formatjs/ts-transformer](https://formatjs.io/docs/tooling/ts-transformer) OR
2. Configure your `eslint` config to include [eslint-plugin-formatjs](https://formatjs.io/docs/tooling/linter#enforce-id)
to autofix this issue
Error: [@formatjs/intl] An `id` must be provided to format a message. You can either:
1. Configure your build toolchain with [babel-plugin-formatjs](https://formatjs.io/docs/tooling/babel-plugin)
or [@formatjs/ts-transformer](https://formatjs.io/docs/tooling/ts-transformer) OR
2. Configure your `eslint` config to include [eslint-plugin-formatjs](https://formatjs.io/docs/tooling/linter#enforce-id)
to autofix this issue
    at invariant (webpack://__ember_auto_import__/../node_modules/@formatjs/ecma402-abstract/lib/utils.js?:28:315)
    at formatMessage (webpack://__ember_auto_import__/../node_modules/@formatjs/intl/lib/src/message.js?:11:70)
    at FormatMessage.format (http://localhost:4200/assets/vendor.js:204679:43)
    at _class2.serviceFormatterProxy [as formatMessage] (http://localhost:4200/assets/vendor.js:205770:37)
    at _class2.t (http://localhost:4200/assets/vendor.js:205643:23)
    at _default.format (http://localhost:4200/assets/vendor.js:205226:24)
    at _default.compute (http://localhost:4200/assets/vendor.js:205091:19)
    at http://localhost:4200/assets/vendor.js:32030:26
    at deprecateMutationsInTrackingTransaction (http://localhost:4200/assets/vendor.js:82031:9)
    at ClassicHelperManager.getValue (http://localhost:4200/assets/vendor.js:32029:64)

While on version 5.7.2 this would trigger an info log:

Missing translation "" for locale "en"

[gzurbach]

@IgnaceMaes I am still on 5.7.2 of ember-intl but maybe this would help?

In config/ember-intl.js, have you tried setting the following config key:

errorOnMissingTranslations: false

Hope it helps!

[IgnaceMaes]

Even with that option disabled it still throws the error at runtime.

For now I've been extending the t helper and setting the allowEmpty flag on true to have the same behaviour as in versions 5.x.

import Helper from 'ember-intl/helpers/t';

export default class extends Helper {
  allowEmpty = true;
}

[ijlee2]

@IgnaceMaes I confirmed that, in 6.0.0-beta.7, a runtime error occurs when we try to render a page with the translation {{t ""}}.

-format-base.js:40 Uncaught Error: <hello-world@helper:t::ember90> helper requires value attribute.
    at _default.compute (-format-base.js:40:1)
    at ClassicHelperManager.getValue (index.js:2484:1)
    at manager.js:300:1
    at reference.js:136:1
    at track (validator.js:635:1)
    at valueForRef (reference.js:135:1)
    at Object.evaluate (runtime.js:3269:1)
    at AppendOpcodes.evaluate (runtime.js:1052:1)
    at LowLevelVM.evaluateSyscall (runtime.js:4214:1)
    at LowLevelVM.evaluateInner (runtime.js:4185:1)

However, I'm hesitant to consider the issue a bug or regression. To my understanding, allowEmpty hadn't been set to true for the {{t}} helper. We can see this by the absence of allowEmpty in addon/helpers/t.js and addon/helpers/t.d.ts.

Because of another change in behavior (missing setupIntl() in a test now errors in 6.0.0-beta.x, whereas the test would run in 5.7.2), it feels like to me that the app (or possibly ember-intl) might have accidentally been too forgiving (possibly due to outdated dependencies of ember-intl). Instead of letting the app continue to run, it's probably better to throw an error or not build, so that developers know early that something that they assumed isn't correct.

Can you help me understand your case? I didn't quite understand how we might have {{t ""}} or {{t undefined}}.

[ijlee2]

Will close the issue, as @formatjs/intl is correctly handling the case of an empty message key by throwing the error [@formatjs/intl] An id must be provided to format a message.. I wrote a test in #1889 to document this case.