Error 'Is not a function' when using imported class

I am using an httpClient request to load some data, and have imported a class and object to handle getting status codes based on the json results.

The line in the js code is this:

this.status_code_list = await this.statusObj.getStatusCodes(this.customerRecord[0].customer.debtor_id);

The error is this:

aris.js?a693:116 Uncaught (in promise) TypeError: _this.statusObj.getStatusCodes is not a function
    at _callee$ (aris.js?a693:116)
    at tryCatch (runtime.js?96cf:45)
    at Generator.invoke [as _invoke] (runtime.js?96cf:274)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:97)
    at asyncGeneratorStep (aris:14)
    at _next (aris:16)

This line works fine in another file, and I moved it here to abstract what is going on.

Here is how I import it at the top:

import {Status_Codes} from './status_code';

@inject(Client, Status_Codes, HttpClient)

export class Aris
    constructor(client, httpClient, stat) {

      this.httpClient = new HttpClient();
      this.clientObj = client;
      this.statusObj = stat;

Here is the status_code.js

import {HttpClient} from 'aurelia-fetch-client';
import {bindable, inject, customElement} from 'aurelia-framework';
import $ from 'jquery';
import 'select2';
import 'select2/dist/css/select2.css'

@inject(HttpClient, Element)

export class Status_Codes {

    @bindable name = null; // The name of our custom select
    @bindable selected = false; // The default selected value
    @bindable options = {}; // The label/option values

    constructor(httpClient, element)
        this.httpClient = new HttpClient();
        this.element = element;

    async getStatusCodes(dbtr_id) {
        const self = this;
        var url = '';
        url += '?aris_id=' + dbtr_id;

        if ( dbtr_id )
             return this.httpClient
                .then(async (response) => {
                  let stat_codes = await response.json(); 
//                  console.log( 'response: ', stat_codes.status_codes ); 
                  return stat_codes.status_codes;

    attached() {
          .on('change', (event) => {
              let changeEvent;

              if (window.CustomEvent) {
                  changeEvent = new CustomEvent('change', {
                      detail: {
                      bubbles: true
              } else {
                  changeEvent = document.createEvent('CustomEvent');
                  changeEvent.initCustomEvent('change', true, true, {
                      detail: {

I don’t know why this isn’t working in this file as opposed to the other file.

1 Like

It seems like the order of inject and constructor params is not the same.

inject(Client, Status_Codes, HttpClient)
constructor(client, httpClient, stat) {

1 Like

That fixed it! I had no idea those needed to be the same.



It’s a small detail in the docs

Simply ensure that the inject decorator and the constructor match one another, including the order of the dependencies

Seems like you’re making good progress with your app seeing all those questions becoming gradually more complex. Rock on