Ember CLI IC Ajax

Common errors

• Uncaught ReferenceError: jQuery is not defined

  cause `ic-ajax` is a wrapper around jQuery's `$.ajax` method, and this error indicates jQuery is not loaded or available in the global scope.
  fix Ensure jQuery is correctly included in your Ember application's build process. In modern Ember CLI, this typically involves ensuring `ember-cli-jquery` or similar is installed and configured, or explicitly importing `jquery` if tree-shaken.

• Error: Could not find module `ic-ajax` imported from `(unknown entry)`

  cause This error occurs when the `ic-ajax` module cannot be resolved by Ember CLI's module loader, often due to improper installation, a missing `app.import` statement for older addons, or attempting to import a globally exposed library as a module.
  fix Verify that `ember-cli-ic-ajax` is installed correctly via `npm install --save-dev ember-cli-ic-ajax`. If using an older Ember CLI setup, check `ember-cli-build.js` for `app.import('bower_components/ic-ajax/dist/named-amd/main.js', { exports: { 'ic-ajax': ['default', 'request', 'raw', 'defineFixture', 'lookupFixture'] } });` or similar configuration if not handled automatically by the addon blueprint.

Warnings

• breaking The `ember-cli-ic-ajax` addon and its underlying `ic-ajax` library are abandoned and have not been updated for approximately 10 years. They are incompatible with modern Ember.js features, best practices, and JavaScript ecosystems.
  Fix: Migrate to `ember-fetch`, `ember-ajax-fetch`, or native `fetch` for AJAX operations. For Ember Data integration, use the built-in adapter mechanisms or a modern network adapter.
• gotcha Relies on jQuery for its AJAX implementation. Modern Ember applications increasingly reduce their reliance on jQuery. If jQuery is not available or is removed, `ic-ajax` will fail.
  Fix: Ensure jQuery is present in your Ember application's build, or preferably, migrate to a modern AJAX solution that does not depend on jQuery.
• gotcha `ic-ajax` (and by extension `ember-cli-ic-ajax`) is incompatible with Ember's FastBoot server-side rendering, as it directly uses browser-specific jQuery `$.ajax` methods.
  Fix: For FastBoot-compatible AJAX, use `ember-fetch` or `ember-ajax-fetch`, which provide isomorphic solutions for both browser and Node.js environments.
• deprecated The primary `ember-ajax` addon, which was a successor to `ic-ajax`, is also now deprecated in favor of `ember-fetch` or `ember-ajax-fetch`.
  Fix: Avoid using `ember-cli-ic-ajax` and its direct successors. Prioritize `ember-fetch` or `ember-ajax-fetch` for new development.

Install

• npm install ember-cli-ic-ajax npm
• yarn add ember-cli-ic-ajax yarn
• pnpm add ember-cli-ic-ajax pnpm

Imports

• request
  wrong:

  const request = require('ic-ajax').request;

  correct:

  import { request } from 'ic-ajax';

  While older Ember CLI setups might have relied on globals, modern Ember (even when using old libraries) prefers explicit ESM imports. The `ic-ajax` library itself ships with AMD/CJS/Global support.
• ajax
  wrong:

  const ajax = require('ic-ajax');

  correct:

  import ajax from 'ic-ajax';

  This provides the default export which is the `ic.ajax` object, allowing calls like `ajax.request()`.
• ic.ajax
  wrong:

  import { ic.ajax } from 'ic-ajax';

  correct:

  const { request } = window.ic.ajax; // or Ember.$.ajax for jQuery compatibility

  For very old Ember CLI applications where `ic-ajax` was globally exposed via `vendor.js`, direct access to `window.ic.ajax` or `ic.ajax` was common. This pattern is not recommended in modern Ember.

Quickstart

Demonstrates fetching data using `ic-ajax`'s `request` method within an Ember component, handling success and error states.

import Component from '@ember/component';
import { action } from '@ember/object';
import { request } from 'ic-ajax';

export default class DataFetcherComponent extends Component {
  message = 'Click button to fetch data';
  data = null;

  @action
  async fetchData() {
    this.set('message', 'Fetching data...');
    try {
      const response = await request('/api/data', {
        method: 'GET',
        dataType: 'json'
      });
      this.set('data', response);
      this.set('message', 'Data fetched successfully!');
    } catch (error) {
      console.error('AJAX Error:', error);
      this.set('message', `Failed to fetch data: ${error.message || error.statusText}`);
    }
  }
}