EmberJS nested route model

Question

I'm using EmberJS 1.13.3, EmberData 1.13.4, active-model-adapter 1.13.3 and I'm trying to load some model data from the store. The parent route makes the call to the API and works as expected, but the child route calls the API but returns with the following error:

Cannot read property '_internalModel' of undefined TypeError: Cannot read property '_internalModel' of undefined

My code looks like this:

File: routes/user.js

import Ember from 'ember';

export default Ember.Route.extend({
  titleToken: function() {
    return 'Profile';
  },

  model: function(params) {
    return Ember.RSVP.hash({
      user: this.store.findRecord('user', params.username)
    });
  },

  setupController: function(controller, models) {
    this._super(controller, models);
    controller.setProperties(models);
  }
});

File: routes/user/posts.js

import Ember from 'ember';

export default Ember.Route.extend({
  titleToken: function() {
    return 'Posts';
  },

  model: function() {
    return Ember.RSVP.hash({
      posts: this.store.findRecord('post', 'my_username')
    });
  },

  setupController: function(controller, models) {
    controller.setProperties(models);
  }
});

The JSON response for both looks the following:

User route:

{
  "user": {
    "id":"1",
    "username":"my_username",
    "first_name":"John",
    "last_name":"Doe",
    "post_ids":[1, 2]
  }
}

Posts route:

{
  "posts":[
    { "id": 1, "author": "John Doe", "text": "My post", "username": "my_username", "user_id": 1 },
    { "id": 2, "author": "John Doe", "text": "My post2", "username": "my_username", "user_id": 1 }
  ]
}

And the code for router.js

Router.map(function() {

  this.route('user', { path: '/:username' }, function() {
    this.route('posts');
  });

  this.route('login');
});

Answer 1

This error occurs when you pass something other than an ID to find or findRecord methods. Not a very helpful error message I must say.

Anyway you can read some documentation on this here: http://emberjs.com/blog/2015/06/18/ember-data-1-13-released.html#toc_simplified-find-methods

Answer 2

I had the same error. In my case the problem was that my fixtures were inconsistent, as shown in the example below:

GET /sports

[{id: 1, name: 'Sport A'}, {id:2, name: 'Sport B'}]

GET /sports/1
{id: 1, name: 'Sport C'}

Answer 3

I had the same error, and I managed to isolate the correct line of code causing the problem by looking at the "Promises" tab in Ember Inspector, searching only in rejecting promises, and one of them had the fulfillment / rejection value "TypeError: Cannot read property '_internalModel' of undefined". The label of the promise gave me the operation, model and id of the record failing. https://github.com/emberjs/ember.js/issues/11863#issuecomment-123898242

In my case, I was returning {} from the server as a response to a findRecord method.

Answer 4

In my case the server wasn't returning the root element. So, for an user server was returning:

{name: name, surname: surname}

instead

user: {name: name, surname: surname}