Error 'Is not a function' when using imported class

Help Requests
1

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
{
    client;
    stat;
    
    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'

@customElement('select2')
@inject(HttpClient, Element)

export class Status_Codes {

    httpClient;
    
    @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 = 'http://aris2.myaris.net/status_code.pl';
        url += '?aris_id=' + dbtr_id;

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

    attached() {
      $(this.element).find('select2')
          .select2()
          .on('change', (event) => {
              let changeEvent;

              if (window.CustomEvent) {
                  changeEvent = new CustomEvent('change', {
                      detail: {
                          value: event.target.value
                      },
                      bubbles: true
                  });
              } else {
                  changeEvent = document.createEvent('CustomEvent');
                  changeEvent.initCustomEvent('change', true, true, {
                      detail: {
                          value: event.target.value
                      }
                  });
              }
              this.element.dispatchEvent(changeEvent);
          });
  }
}

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

1 Like
2

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
3

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

Thanks.

2 Likes
4

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

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

5 Likes