Error invoking View

I am getting a strange error from a view that I have made that I don’t know how to debug or understand.

It is:

ERROR [app-router] Error: Error invoking Aris. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
Inner Error Stack:
Error: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?
    at validateKey (webpack-internal:///3U8n:373:15)
    at Container.get (webpack-internal:///3U8n:512:9)
    at eval (webpack-internal:///3U8n:415:68)
    at Array.map (<anonymous>)
    at Object.invoke (webpack-internal:///3U8n:415:30)
    at InvocationHandler.invoke (webpack-internal:///3U8n:389:28)
    at Container.invoke (webpack-internal:///3U8n:575:28)
    at StrategyResolver.get (webpack-internal:///3U8n:133:39)
    at Container.get (webpack-internal:///3U8n:530:28)
    at eval (webpack-internal:///hij8:4962:71)
End Inner Error Stack

My javascript in aris.js:

import './style.css';
import {jquery} from 'jquery';
import {Client} from './client';
import {bindable, inject, TaskQueue} from "aurelia-framework";
import {HttpClient} from 'aurelia-fetch-client';
import {Customer} from 'customer';
window.jQuery = jquery;
window.$ = jquery;

var $ = require("jquery");

@inject(Client, HttpClient, Customer)

export class Aris
{
    client;
    
    constructor(client, httpClient, customer) {

      this.httpClient = new HttpClient();
      this.clientObj = client;
      this.customerObj = customer;
      this.clients;
//      this.customer = customer;

      // url strings
      this.urlString = null;

      this.custInfoField = [
        { value: 'All', display: 'All' },
        { value: 'Name', display: 'Name' },
        { value: 'Contacts', display: 'Contacts' },
        { value: 'City', display: 'City' },
        { value: 'My Notes', display: 'My Notes' },
        { value: 'All Notes', display: 'All Notes' },
        { value: 'Report As', display: 'Report As' },
        { value: 'Parent Customer', display: 'Parent Customer' },
    ];

    this.selectedCustInfo = null;

    }


  async findArisId(debtor_id) {
        const self = this;
        self.cookie = document.cookie.split("=");
        
        console.log('self findarisid', self);

        self.user = self.cookie[1];

        if ( self.user )
        {
            var url = 'http://aris2.myaris.net/search.pl';
            url += '?REMOTE_USER=' + self.user;

//            console.log( 'url: ', url );

            if ( self.cust_num )
            {
              var newCustNum = self.cust_num.replace( /#/, '' );

              if (typeof(newCustNum) != undefined && newCustNum != null)
              {
                url += '&aris_id=' + newCustNum;
              }
              else
              {
                url += '&aris_id=' + self.cust_num;
              }
              
            }
            else if (debtor_id)
            {
              url += '&aris_id=' + debtor_id;
            }

            if ( self.cust_info )
            {
                url += '&cust_info=' + self.cust_info;
                url += '&cust_info_field=' + self.selectedCustInfo;
            }

            if ( self.invoice_number )
            {
                url += '&invoice_number=' + self.invoice_number;
            }

            if ( self.po_number )
            {
                url += '&po_number=' + self.po_number;
            }

//            console.log( 'url', url );

            return self.httpClient
            .fetch(url)
              .then(async (response) => {
                let aris_idObj = await response.json(); 
//                console.log( 'response: ', aris_idObj ); 
                this.customerRecord = 
                  await this.clientObj.getCustomerData(aris_idObj.customerData.aris_id);
                if( this.customerRecord )
                {
                  this.status_code_list = await this.statusObj.getStatusCodes(this.customerRecord[0].customer.debtor_id);  
                  this.selectedStatusCode = this.customerRecord[0].customer.status_code;
//                  console.log('status 2', this.status_code_list);
//                  console.log('selectedStatusCode', this.selectedStatusCode);
                  this.statusSelect();
                  this.worklistSelect();
                  
                  self.phone_list = this.customerRecord[3].phone;
                  //console.log('customerRecord[0]', this.customerRecord[0].customer);
                  //console.log('phone_list', self.phone_list);

                  if (this.customerRecord[0].customer.rms_acct_id.match('Stratosphere'))
                  {
                    this.contactType = this.stratPhoneContactType;
                    this.cellEditorParamsContactType = this.stratPhoneType;
                  }
                  else
                  {
                    this.contactType = this.phoneContactType;
                    this.cellEditorParamsContactType = this.phoneType;
                  }

                  this.initPhoneGrid(this);
                  this.initAddrGrid(this);

//                  this.phoneGridOptions.api.setRowData(this.phone_list);
//                  this.phoneGridOptions.api.refreshCells();

                  this.router.navigateToRoute('customer', {debtor_id: this.dbtr.debtor_id});
                }
                  return this.customerRecord;
              });
  
        }
    }

    async bind () 
    {
      this.clients = await this.clientObj.getClientList();

    }
}

I am importing it inside customer.js, and customer.js is imported into aris.js because it has a function that I need from there.

I am not sure if this is the problem?

Any tips on what to look for are greatly appreciated.

1 Like

This is normally a result of circular dependencies, and thus incompatible with normal bundler (webpack)

It says it happens on the class with name Aris, maybe check there?

I moved the things that I was including into one view, and it appears to be working fine now.

So it was the circular include, which was poorly thought out on my end.

Thanks for the tip.

2 Likes