Ember CLI Flash Messages

Common errors

• Error: Could not find module `@ember/service` imported from `your-app/components/my-component`

  cause Old Ember CLI versions or an incorrect setup preventing module resolution for `@ember/service`.
  fix Ensure your Ember application is compatible with Ember.js v4.12+ and uses `ember-auto-import v2` or Embroider. Update your `package.json` and install necessary dependencies.

• TypeError: this.flashMessages.success is not a function

  cause The `flashMessages` service was not properly injected or is undefined in the current context.
  fix Ensure you have `import { service } from '@ember/service';` and are using `@service declare flashMessages: FlashMessagesService;` (or `@service flashMessages;` for JS) in your component or controller class.

• Error: Assertion Failed: The component `<FlashMessage::Component/>` expects a `message` argument, but it was not provided.

  cause Incorrect usage of the `<FlashMessage::Component />` without a service providing messages, or attempting to pass a message directly when it expects to consume from the service.
  fix Ensure the `<FlashMessage::Component />` is placed in a template where it can access the `flashMessages` service implicitly (e.g., `application.hbs`), and that you are adding messages via `this.flashMessages.add()` or its convenience methods.

• Property 'onClose' does not exist on type 'FlashMessagesService'.

  cause Attempting to use a custom `on*` property (like `onClose`) directly on the `FlashMessagesService` instance without declaring it in your custom flash message type for TypeScript.
  fix When using custom fields like `onClose`, define a generic type parameter for `FlashMessagesService` and `FlashMessage` component, e.g., `type MyFlashOptions = { onClose?: () => void }; @service declare flashMessages: FlashMessagesService<MyFlashOptions>;`.

Warnings

• breaking In `v4.0.0`, automatic injection of the `flashMessages` service was removed. Developers must now manually inject the service using `@service flashMessages: FlashMessagesService;`. Additionally, the `flash-message` component was converted to a Glimmer component, which might require template syntax adjustments if relying on classic Ember component behaviors.
  Fix: Explicitly inject the service: `import { service } from '@ember/service'; @service flashMessages;`. Update `flash-message` component usage to Glimmer component syntax (e.g., named arguments).
• breaking Version `6.0.0` introduced significant internal modernizations, converting `FlashMessagesService` and `FlashObject` to native JavaScript classes. While the public API aimed to remain largely compatible, custom extensions or deep integrations relying on older Ember object models might require adjustments.
  Fix: Review custom logic interacting with `FlashMessagesService` or `FlashObject` instances and adapt to native class paradigms. For most users, direct usage of the service methods should remain compatible.
• breaking With `v5.0.0`, `@embroider/macros` became a peer dependency, meaning it must be explicitly installed by the consuming application. The addon's default blueprint was also removed, replacing it with explicit test helpers, which might affect initial setup or testing strategies.
  Fix: Ensure `@embroider/macros` is installed in your project (`npm install @embroider/macros`). For testing, refer to the addon's documentation for updated test helper usage instead of relying on blueprint-generated files.
• gotcha Version `7.0.0` fixed issues allowing custom `on*` properties and made `removeBy()` immediate. While a bug fix, developers relying on previous, potentially buggy `on*` property behavior or synchronous `removeBy()` might notice subtle changes in message lifecycle or removal timing.
  Fix: Test message lifecycle and removal logic after upgrading to `v7.0.0` to ensure no unexpected behavior arises from the corrected `on*` property handling or immediate `removeBy()` execution.

Install

• npm install ember-cli-flash npm
• yarn add ember-cli-flash yarn
• pnpm add ember-cli-flash pnpm

Imports

• FlashMessagesService

  import type { FlashMessagesService } from 'ember-cli-flash';

  This is a TypeScript-specific import for type declarations. The `flashMessages` service itself is injected at runtime using `@service`.
• service
  wrong:

  import service from '@ember/service';

  correct:

  import { service } from '@ember/service';

  Used as a decorator to inject the `flashMessages` service into Ember components, controllers, or other injectables.
• Component
  wrong:

  const Component = require('@glimmer/component');

  correct:

  import Component from '@glimmer/component';

  While not directly from `ember-cli-flash`, this is the standard way to define a Glimmer component in modern Ember apps where `flashMessages` is typically consumed. `ember-cli-flash` is ESM-only in modern versions.

Quickstart

Demonstrates injecting the `flashMessages` service into an Ember Glimmer component and using its convenience methods (`.success`, `.danger`) to display messages with custom options, including promise-based handling and clearing all messages.

import Component from '@glimmer/component';
import { service } from '@ember/service';
import { action } from '@ember/object'; // Or @glimmer/tracking for reactivity if needed

import type { FlashMessagesService } from 'ember-cli-flash';

export default class MyComponent extends Component {
  @service declare flashMessages: FlashMessagesService;

  @action
  showSuccessMessage() {
    this.flashMessages.success('Data saved successfully!', {
      timeout: 3000,
      sticky: false,
      type: 'success', // For Bootstrap/Foundation styling
      // Custom options are also supported
      user: 'currentUser',
      priority: 100
    });
  }

  @action
  showErrorMessage() {
    this.flashMessages.danger('Failed to save data. Please try again.', {
      timeout: 5000,
      sticky: true,
      showProgress: true
    }).then(flashObject => {
      console.log('Flash message dismissed or timed out:', flashObject.message);
    });
  }

  @action
  clearAllMessages() {
    this.flashMessages.clearMessages();
  }
}

// In your application template (e.g., application.hbs), typically:
// <FlashMessage::Component />
// Ensure your app's CSS includes styles for .alert, .alert-success, etc.