简体   繁体   中英

Deploying ember-rails to Heroku - TypeError: Cannot read property 'typeKey' of undefined

Part of the page loads then blank and I get the following error.

TypeError: Cannot read property 'typeKey' of undefined
    at Ember.Object.extend.modelFor (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:19:12298)
    at Ember.Object.extend.recordForId (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:19:8860)
    at s (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:19:1790)
    at http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:19:1524
    at http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:18:32392
    at http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:9:22231
    at Object.l.forEach (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:9:21553)
    at Object.u.forEach (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:9:22198)
    at Function.a.reopenClass.eachRelationship (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:18:32368)
    at a (http://my-app.herokuapp.com/assets/manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:19:1302) manifest-docs-cbb67138a1a7e2bbc15fdbae9b24aa06.js:9n.function.n.apply.r

Here are my models:

# app/models/plan.js.coffee
App.Plan = DS.Model.extend
  name: DS.attr('string')
  slug: DS.attr('string')
  project: DS.belongsTo('project')
  sections: DS.hasMany('section',{async: true})

# app/models/section.js.coffee
App.Section = DS.Model.extend
  name: DS.attr('string')
  details: DS.attr('string')
  sort_order: DS.attr('number')
  plan: DS.belongsTo('plan')
  summary_of_changes: DS.attr('string')

# app/models/project.js.coffee
App.Project = DS.Model.extend
  name: DS.attr('string')

I'm running:

DEBUG: ------------------------------- 
DEBUG: Ember      : 1.7.1+pre.c1ec09ad 
DEBUG: Ember Data : 1.0.0-beta.9 
DEBUG: Handlebars : 1.3.0 
DEBUG: jQuery     : 1.10.2 
DEBUG: ------------------------------- 

[Edit: Added project model code] [Edit 2: Found relevant discussion on the ember forums here: http://discuss.emberjs.com/t/ember-data-dont-want-to-load-belongsto-relationship/5703/11]

I got some help with this and it turned out to be a strange bug indeed.

Firstly for those of you who come here with Ember + TypeKey issues.

Finding clues as to where the issue is

I personally had managed to narrow my error down to this part of my code by reading down the stack trace and seeing the "Object.l.forEach" and realising there was only one forEach on that page.

            {{#each section in model.sections}}
                <h2>
                    {{section.name}}
                    {{link-to 'edit' 'section.edit' section classNames='edit'}}
                </h2> 
                {{markdown section.details}}
            {{/each}}

What does the typeKey error mean?

As I was explained it, the link-to helper is passed an object, above it should be a section object. Ember asks the object it's type by calling object.typeKey. But in this case the object is missing so then we get the error message which is basically saying "I tried to look up the type of the object by requesting it's typeKey but no object is defined".

The way to address this is to ask the question why is the object undefined, and in all likelihood it could be because the data source is not being serialized correctly. .

How we found the solution

We then looked in Chrome Inspector > Network tab and saw that all the requests for sections were coming in just fine and I could see all the data in the responses.

BUT, when looking in Ember Inspector > Data, the sections were listed but for all the details except the id they showed as undefined in all the fields.

We then looked at the json coming out of my app locally and what was coming out in production.

{"section":{"id":69,"name":"Whatever","plan":{"id":11,"name":"Sample Project","slug":null,"project_id":78}}

Ember actually doesn't want embedded records in the JSON, just id's thankyou. So it should have looked like this

{"section":{"id":69,"name":"Whatever","plan_id":11}}

Well the craziness is that I had misspelled my rails serializer file to be: /app/serializers/section s _serializer.rb when the file name should have been the singular.

In short rails in development was hunting for the file at runtime and overlooking my error while the production app was more strict and wasn't finding the file in the same way.

Once I renamed the file to match, I was suddenly able to produce the typeKey error on my local machine.

The fix was simple.

To achieve the correct JSON I just needed to use embed: id in the rails serializer which I realised Id used for my other models but not for this one. Fixing it like so.

class SectionSerializer < ActiveModel::Serializer
    attributes :id, :name, :info
    embed :id   # add this line to get your rails serializer to set things up like Ember likes
end 

And the error was fixed.

One of the weirdest bugs I've had to fix.

Another tip: We looked and made sure we had set explicit versions for relevant gems and bower components but this didn't turn out to be an issue, but is an obvious starting point if production is producing different errors than in development.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM