# Error 'Is not a function' when using imported class

**URL:** <https://discourse.aurelia.io/t/error-is-not-a-function-when-using-imported-class/3775>\
**Category:** Help Requests\
**Created:** [September 12, 2020, 5:13pm UTC](https://discourse.aurelia.io/t/error-is-not-a-function-when-using-imported-class/3775 "2020-09-12T17:13:43Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [September 12, 2020, 5:13pm UTC](https://discourse.aurelia.io/t/error-is-not-a-function-when-using-imported-class/3775/1 "2020-09-12T17:13:43Z")

</div>

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:

```auto
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:

```auto
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

```auto
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.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [September 12, 2020, 5:51pm UTC](https://discourse.aurelia.io/t/error-is-not-a-function-when-using-imported-class/3775/2 "2020-09-12T17:51:34Z")

</div>

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

inject(Client, Status\_Codes, HttpClient)  
constructor(client, httpClient, stat) {

---

<div class="post-metadata">

**Author:** ![rhysshadow](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/rhysshadow/32/1959_2.png) [@rhysshadow](https://discourse.aurelia.io/u/rhysshadow)\
**Post date:** [September 12, 2020, 6:11pm UTC](https://discourse.aurelia.io/t/error-is-not-a-function-when-using-imported-class/3775/3 "2020-09-12T18:11:23Z")

</div>

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

Thanks.

---

<div class="post-metadata">

**Author:** ![zewa666](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/zewa666/32/19_2.png) [@zewa666](https://discourse.aurelia.io/u/zewa666)\
**Post date:** [September 12, 2020, 6:16pm UTC](https://discourse.aurelia.io/t/error-is-not-a-function-when-using-imported-class/3775/4 "2020-09-12T18:16:38Z")

</div>

It’s a small [detail in the docs](http://aurelia.io/docs/fundamentals/dependency-injection#injection)

> 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