This node does not have access to a size component

Question

My code looks like this

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
var Position = require('famous/components/Position');
var Transitionable = require('famous/transitions/Transitionable');
var Size = require('famous/components/Size')
var Tile = require('./Tile.js');
var Card = require('./Card.js');
var Selector = require('./Selector.js');
var ChannelCard = require('./ChannelCard.js');
var PanelCard = require('./PanelCard.js');
var KeyCodes = require('../utils/KeyCodes.js');

function App(selector, data) {
  this.context = FamousEngine.createScene(selector);
  this.rootNode = this.context.addChild();

  this.tilesData = data.tilesData;
  this.selectedTileIndex = 0;

  this.tiles = [];

var firstNode = this.rootNode.addChild(new Card('url(images/tile-01-vidaa.png)','#9a105f', FIRST_X_POSITION, Y_POSITION));

}.bind(this));

 module.exports = App;

where Card.js looks like this :

  var DOMElement = require('famous/dom-renderables/DOMElement');
    var FamousEngine = require('famous/core/FamousEngine');
    var Transitionable = require('famous/transitions/Transitionable');
    var Node = require('famous/core/Node');
    var FIRST_X_POSITION = 100;
    var Y_POSITION = 200;
    function Card(bgUrl, bgColor, xpos, ypos) {
      Node.call(this);
      console.log("xpos + " + xpos);
      console.log("ypos + " + ypos);
      this.setSizeMode('absolute', 'absolute');
      this.setAbsoluteSize(250, 250);
      this.setPosition(xpos, ypos);
      this.nodeDomElement = new DOMElement(this);
      this.nodeDomElement.setProperty('backgroundImage', bgUrl);
      this.nodeDomElement.setProperty('background-color', bgColor);
    }


    Card.prototype = Object.create(Node.prototype);
    Card.prototype.constructor = Card;
    module.exports = Card;

However, when I run in using famous dev, I get the following error

Uncaught Error: This node does not have access to a size component

setSizeMode @ Node.js:1061Card @ Card.js:11App @ App.js:43

Please help me figure out what is causing the error and how to fix.

Answer 1

Your Node needs a context. If you have not yet added the node to a scene (or there is not yet a scene), add it before running any methods on the components. In the example of my 3D Asteroids game, I had to do the following to avoid the error:

function Game(scene, world) {
Node.call(this);
scene.addChild(this);
this._domElement = new DOMElement(this);
this.world = world;
this.asteroids = [];
this.bullets = [];
this.setProportionalSize(1, 1, 1);
this.addUIEvent('click');
this.addUIEvent('keydown');

}

If you have not yet created a scene, you can do so by running:

function Game() {
// ...
var context = FamousEngine.getContext('body');
context.addChild(this);

}

Answer 2

I believe the issue was a bug in Famous Engine and there were 2 manifestations of it.

The first manifestation was fixed by the following PR : https://github.com/Famous/engine/pull/349

The second manifestation was fixed by the following PR : https://github.com/Famous/engine/pull/350

However, at the time of writing this, these have not been merged to master so one needs to work off develop branch to have these fixes.