{"id":17216,"library":"ember-cli-flash","title":"Ember CLI Flash Messages","description":"ember-cli-flash is a robust Ember addon that provides a simple yet highly configurable solution for displaying flash messages (e.g., growl, toast notifications) within Ember applications. It includes both a `flashMessages` service for managing messages and a `FlashMessage` component for rendering them. Currently in stable version 7.0.0, the library generally follows a yearly major release cycle, with minor and patch updates in between, aligning with Ember's LTS and general release schedule. Key differentiators include its promise-aware API, out-of-the-box styling support for frameworks like Bootstrap and Foundation, and comprehensive TypeScript definitions allowing for custom message fields with generics, making it type-safe and adaptable to complex notification requirements. It integrates well with modern Ember tooling, requiring Ember.js v4.12 or above and Embroider or ember-auto-import v2.","status":"active","version":"7.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/adopted-ember-addons/ember-cli-flash","tags":["javascript","ember-addon","ember","ember-cli","flash messages","flash","growl","toast","notifications"],"install":[{"cmd":"npm install ember-cli-flash","lang":"bash","label":"npm"},{"cmd":"yarn add ember-cli-flash","lang":"bash","label":"yarn"},{"cmd":"pnpm add ember-cli-flash","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for modern Ember builds and optimisations; moved to peer dependency in v5.0.0.","package":"@embroider/macros","optional":false},{"reason":"Used for managing lifecycle of DOM elements and modifiers, a peer dependency since v5.x.","package":"ember-modifier","optional":false}],"imports":[{"note":"This is a TypeScript-specific import for type declarations. The `flashMessages` service itself is injected at runtime using `@service`.","symbol":"FlashMessagesService","correct":"import type { FlashMessagesService } from 'ember-cli-flash';"},{"note":"Used as a decorator to inject the `flashMessages` service into Ember components, controllers, or other injectables.","wrong":"import service from '@ember/service';","symbol":"service","correct":"import { service } from '@ember/service';"},{"note":"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.","wrong":"const Component = require('@glimmer/component');","symbol":"Component","correct":"import Component from '@glimmer/component';"}],"quickstart":{"code":"import Component from '@glimmer/component';\nimport { service } from '@ember/service';\nimport { action } from '@ember/object'; // Or @glimmer/tracking for reactivity if needed\n\nimport type { FlashMessagesService } from 'ember-cli-flash';\n\nexport default class MyComponent extends Component {\n  @service declare flashMessages: FlashMessagesService;\n\n  @action\n  showSuccessMessage() {\n    this.flashMessages.success('Data saved successfully!', {\n      timeout: 3000,\n      sticky: false,\n      type: 'success', // For Bootstrap/Foundation styling\n      // Custom options are also supported\n      user: 'currentUser',\n      priority: 100\n    });\n  }\n\n  @action\n  showErrorMessage() {\n    this.flashMessages.danger('Failed to save data. Please try again.', {\n      timeout: 5000,\n      sticky: true,\n      showProgress: true\n    }).then(flashObject => {\n      console.log('Flash message dismissed or timed out:', flashObject.message);\n    });\n  }\n\n  @action\n  clearAllMessages() {\n    this.flashMessages.clearMessages();\n  }\n}\n\n// In your application template (e.g., application.hbs), typically:\n// <FlashMessage::Component />\n// Ensure your app's CSS includes styles for .alert, .alert-success, etc.\n","lang":"typescript","description":"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."},"warnings":[{"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).","message":"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.","severity":"breaking","affected_versions":">=4.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"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.","severity":"gotcha","affected_versions":">=7.0.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"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.","cause":"Old Ember CLI versions or an incorrect setup preventing module resolution for `@ember/service`.","error":"Error: Could not find module `@ember/service` imported from `your-app/components/my-component`"},{"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.","cause":"The `flashMessages` service was not properly injected or is undefined in the current context.","error":"TypeError: this.flashMessages.success is not a function"},{"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.","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.","error":"Error: Assertion Failed: The component `<FlashMessage::Component/>` expects a `message` argument, but it was not provided."},{"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>;`.","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.","error":"Property 'onClose' does not exist on type 'FlashMessagesService'."}],"ecosystem":"npm","meta_description":null}