Using ember-intl with ember-cli-flash

@Daniel_Restrepo wrote:

Hi,

I am trying to use internationalized messages for flash messages on my components. I am doing it like this:

import { t } from 'ember-intl';

export default Component.extend({
  /**
   * Toast like messages
   */
  flashMessages: service(),
 
  actions: {
   /**
     *
     * @return {Promise<void>}
     */
    async move() {
      this.flashMessages.clearMessages();
      try {
        set(this, 'isSaving', true);
        await this.selectedTargetPublisher.move({
          sourceId: this.selectedSourcePublisher.get('id')
        });
        this.flashMessages.success(`${t('admin.toasts.unification')}`, { sticky: true });
        set(this, 'isSaving', true);
      } catch (e) {
        this.flashMessages.alert(e, { sticky: true });
        throw new Error(e);
      }
    }
  }
});

But it throws an error Only one computed property decorator can be applied to a class field or accessor, but and so no message is printed on the toast message:

function COMPUTED_DECORATOR(target, key, propertyDesc, maybeMeta, isClassicDecorator$$1) {
      true && !(true
      /* EMBER_NATIVE_DECORATOR_SUPPORT */
      || isClassicDecorator$$1) && (0, _debug.assert)('Native decorators are not enabled without the EMBER_NATIVE_DECORATOR_SUPPORT flag', true || isClassicDecorator$$1);
      true && !(isClassicDecorator$$1 || !propertyDesc || !propertyDesc.get || propertyDesc.get.toString().indexOf('CPGETTER_FUNCTION') === -1) && (0, _debug.assert)("Only one computed property decorator can be applied to a class field or accessor, but '" + key + "' was decorated twice. You may have added the decorator to both a getter and setter, which is unecessary.", isClassicDecorator$$1 || !propertyDesc || !propertyDesc.get || propertyDesc.get.toString().indexOf('CPGETTER_FUNCTION') === -1);
      let meta$$1 = arguments.length === 3 ? (0, _meta2.meta)(target) : maybeMeta;
      desc.setup(target, key, propertyDesc, meta$$1);
      let computedDesc = {
        enumerable: desc.enumerable,
        configurable: desc.configurable,
        get: DESCRIPTOR_GETTER_FUNCTION(key, desc)
      };

      if (false
      /* EMBER_METAL_TRACKED_PROPERTIES */
      ) {
          computedDesc.set = DESCRIPTOR_SETTER_FUNCTION(key, desc);
        }

      return computedDesc;
    }

I’ve tried several alternatives like storing the internationalized text in a variable (const and let) but getting the same result every time.

Thanks a lot

Edit

It must be done importing the intl service:

flashMessages: service(),
intl: service(),

actions: {
   save() {
      this.flashMessages.success(this.intl.t('translation.key'));
  }
}

Posts: 2

Participants: 1

Read full topic