How to solve Rails environment difference? Works in staging but not in dev

I have dashboards that are in a backbone.js app in a larger Rails app. In staging and production (on heroku) the dashboards work fine.

However, in my local Pow dev environment I get the following error in the browser console (in Chrome) when I try and view a specific dashboard:

Uncaught TypeError: Object #<Object> has no method 'merge' 

The only place a merge method is used in any of the dashboard setup is in the DashboardModule model:

  def as_json(options = {})
    super((options || { }).merge({
        :methods => [:metric_name, :dimension_name, :dimension_value_name, :date_name, :data]
    }))
  end

I think this is a Rails precompile or asset pipeline setup issue since it works fine in staging and production but fails in local development.

It sucks having to push any changes to heroku to test them. Any suggestions for solving this are appreciated.

I’ve run into this problem before. I believe that you can fix it by changing the way you deal with options. Try changing it to this:

  def as_json(options = {})
    options ||= {}
    super(options.merge({ :methods => [:metric_name, :dimension_name, :dimension_value_name, :date_name, :data]}))
  end

I’m not positive that that will fix it, so if it doesn’t, please get back to me with the whole backtrace for the error.

So I was wrong about the method that was causing the problem. There are no errors in the Rails log, the error comes from the console in the browser. After tracking that down a bit, here is what I came up with. The merge method being referred to in the error message is coming from the rendered /assets/templates/dashboard/details.js file. Here is the code with what the browser is calling the error at the start of line 6: helpers = this.merge…

(function() {
  this.HandlebarsTemplates || (this.HandlebarsTemplates = {});
  this.HandlebarsTemplates["dashboard/details"] = Handlebars.template(function (Handlebars,depth0,helpers,partials,data) {
  this.compilerInfo = [4,'>= 1.0.0'];
helpers = this.merge(helpers, Handlebars.helpers); data = data || {};
  var buffer = "", stack1, functionType="function", escapeExpression=this.escapeExpression;
  buffer += "<p>\n  <b>Name:</b>\n  <span class='editable' data-attribute-name='name'>";
  if (stack1 = helpers.name) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.name; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  buffer += escapeExpression(stack1)
    + "</span>\n</p>\n<p>\n  <b>Description:</b>\n  <span class='editable' data-attribute-name='description'>";
  if (stack1 = helpers.description) { stack1 = stack1.call(depth0, {hash:{},data:data}); }
  else { stack1 = depth0.description; stack1 = typeof stack1 === functionType ? stack1.apply(depth0) : stack1; }
  buffer += escapeExpression(stack1)
    + "</span>\n</p>\n<p>\n  <button class='add_module'>Add module</button>\n</p>\n";
  return buffer;
  });
  return this.HandlebarsTemplates["dashboard/details"];
}).call(this);

Could this be an issue of part of my backbone app not working while precompile is off? This same thing works in staging, but this code is different since it has been precompiled.

Is there any testing or debugging steps I should try to isolate and fix this?

Thanks

This might be an issue with handlebars:

https://github.com/wycats/handlebars.js/issues/547

I suggest you try making sure’ you’re using the latest version of handlebars.

brilliant. thank you.