Contact-manager error

Help Requests
1

Hello everybody :slight_smile:

I went through the contact-manager tutorial and everything was working just fine.
When I tried to run it again after a week it shows a blank page and this error in my console:

Unhandled rejection ReferenceError: api is not defined

I have not changed any files in the project, so I have no idea why this happend.

I have to mention that several other projects that I have started has also been crashing when I tried to run them the day after(without making any changes at all).

2

No changes, and you haven’t updated npm or the like?
Did you remember to start the webserver? Run the command au run --watch

3

No changes in the npm and yes I started the webserver.

4

Try and post the code where the exception is thrown/is pointing to.
Simply running the application should not fail if no changes were made, of course :slight_smile:

5

Here is the whole error message:

error
error.jpg589×620 151 KB

6

Please also post the code that isn’t working :slight_smile:

7

Seems like you changed build tool either by upgrading version or switch bundler. Different bundlers resolve project src in different ways, that could be why it couldnt bundle the api. Another possibility is you have circular references that caused the export to become undefined. Either way probably its not a simple fix.

I would go from api class to remove some imports that potentially cause the circular references

Edit: just had a look at the exception, it seems like somewhere in yur code, you are using api without defining it in the scope. That would be enough to track down the error.

8

can you upload or send us your root folder? (without node_modules) folder?

9

Thank you all for your answers :slight_smile: and I’m sorry for the delayed answer.

bingopon, I am a new developer and don’t understand what you mean. Do you mean that I don’t inject the WebAPI?

wallacenturner, unfortunately I can’t upload a whole folder here, just files. Which files should I upload?

10

It means somewhere in your code you do something like this:

api.getSomething()

But you didn’t have api defined before you call the function member of it. So scan the project again to check where you potentially do that.

11

I think it may be the contact-detail.js file:

import {inject} from ‘aurelia-framework’;
import {WebAPI} from ‘./web-api’;
import {areEqual} from ‘./utility’;

@inject(WebAPI)
export class ContactDetail {
constructor(api){
this.api = api;
}

activate(params, routeConfig) {
this.routeConfig = routeConfig;

  return this.api.getContactDetails(params.id).then(contact => {
    this.contact = contact;
    this.routeConfig.navModel.setTitle(contact.firstName);
    this.originalContact = JSON.parse(JSON.stringify(contact));
  });

}

get canSave() {
return this.contact.firstName && this.contact.lastName && !this.api.isRequesting;
}

save() {
this.api.saveContact(this.contact).then(contact => {
this.contact = contact;
this.routeConfig.navModel.setTitle(contact.firstName);
this.originalContact = JSON.parse(JSON.stringify(contact));
});
}

canDeactivate() {
if (!areEqual(this.originalContact, this.contact)){
return confirm(‘You have unsaved changes. Are you sure you wish to leave?’);
}

  return true;

}
}

12

It looks ok for me, probably from another place

13

it could also come from assignment, something like this

this.api = api;

// or
something = api;