'Promise' is not defined

1

I bootstrapped my first Ember app today and created a service to call my login REST API and retrieve a user.

I’m using Promise with my AJAX calls.

My code works properly when I hit my Ember app in the browser. The REST calls are made, and eventually the Promises resolve properly, or reject as expected if there was an error.

However, I noticed some noise in the ember serve output.

Serving on http://localhost:4200/

services/session.js: line 15, col 16, 'Promise' is not defined.
services/session.js: line 33, col 16, 'Promise' is not defined.
services/session.js: line 50, col 16, 'Promise' is not defined.

3 errors

===== 1 JSHint Error

I’m assuming this is somehow related to JSHint. Though, the output says 3 errors while below that it says 1 JSHint Error. So that seems a bit confusing and I’m not sure if those are related or not.

If it is a JSHint related issue, I saw this article which made me think I had to add something to predef in .jshintrc.

This is what the predef in my .jshintrc file currently looks like. I haven’t modified it. This is the stock version.

{
  "predef": [
    "document",
    "window",
    "-Promise"
  ],

Perhaps I don’t fully understand how Ember uses promises. I thought that the native Promise syntax was alright.

Here’s a trivial example to illustrate what I’m doing in my app.

login(email, password) {
  return new Promise((resolve, reject) => {
	this.get('ajax').request('http://localhost/login', {
	  method: 'POST',
	  data: {
		'Email': email,
		'Password': password
	  }
	}).then((data) => {
	  resolve(data);
	}).catch(() => {
	  reject('Auth failed');
	});
  });
},

I’m assuming I’m missing something obvious. Any ideas on what that is?

2

It does look like a JSHint issue. I changed predef in the .jshintrc file to this and those errors went away (I removed the - from in front of Promise).

  "predef": [
    "document",
    "window",
    "Promise"
  ],

It seems a bit unintuitive to me that I had to modify that stock config file immediately to prevent errors with native promises. I’m assuming the default .jshintrc assumes ES5 and that’s why it’s blacklisted by default.

But after reading the JSHint docs on predef, I think I understand why the errors appeared and why they’re now gone.

This option allows you to control which variables JSHint considers to be implicitly defined in the environment. Configure it with an array of string values. Prefixing a variable name with a hyphen (-) character will remove that name from the collection of predefined variables.

3

use Ember.RSVP.Promise

1 Like
4

Thanks @tsantos83. Can you please explain why I should use Ember.RSVP.Promise in my code rather than Promise?

The docs are a little confusing to me, because they seem to imply that using Promise like I am is fine (see example lifted from the RSVP.Promise docs. It seems to imply that the Promise shorthand is fine).

var promise = new Promise(function(resolve, reject) {
  // on success
  resolve(value);

  // on failure
  reject(reason);
});

http://emberjs.com/api/classes/RSVP.Promise.html

5

There are subtle differences between the two I’m working on eliminating, one of which is that with a fully native promise you would need to join the callback into Ember’s scheduler (Ember.run) yourself.

Generally speaking native promises are also slower because of the nature of their flush mechanism.

As for the default config, that exists just so that you won’t troll yourself in this way:

Prefixing a variable name with a hyphen (-) character will remove that name from the collection of predefined variables.

1 Like
6

Thanks @jthoburn. That makes sense.

I see that if I revert my changes to .jshintrc, and switch my promises to Ember.RSVP.Promise like @tsantos83 originally suggested, my JSHint errors are no longer an issue and everything works fine :tada:

Do you know why the RSVP docs (linked above) would show examples with Promise rather than Ember.RSVP.Promise? Or better yet, how I could suggest a change to that doc? As a new Ember dev googling “Ember Promises”, that article was the first thing I found, and its example code for using promises was leading me down the wrong path.

7

I found the docs confusing in that way as well. Ember.RSVP.Promise

var promise = new Promise(function(resolve, reject) {
  // on success
  resolve(value);

  // on failure
  reject(reason);
});

http://emberjs.com/api/classes/RSVP.Promise.html

There is a little pencil icon in every section of the docs/guides where you can make edits and create pull requests on github.

8

Hi @anon89150419 .

I had the same issue and of course is related with JSHint, which, looks like, doesn’t know what a Promise is… I solved it marking Promise as a global in .eslintrc.js like:

    globals: {
          Promise: false,
          ...

and it is solved. I did the same thing for some global variables defined by my code in vendor’s folder.

Hope it enlights you.