"Uncaught error" in Step 4 - node does not have access to a size component

[nicholejeannine]

I am unable to render the arrow components as written in Step 4 (I copied and pasted the code from the lesson exactly to make sure it wasn't a typing error on my part). Nothing renders in the browser, and the console shows the following error and stack trace:

Node.js:537 Uncaught Error: This node does not have access to a size component
getSizeMode @ Node.js:537
DOMElement @ DOMElement.js:79
Arrow @ Arrow.js:7
Carousel @ Carousel.js:16
56../carousel/Carousel @ index.js:10
s @ _prelude.js:1
e @ _prelude.js:1
(anonymous function) @ _prelude.js:1

I did move on to steps 5 and 6 and noticed that the Pager and Dots components will render, if I comment out all references to Arrows.

Being new to this community in general I apologize for not having any idea on how to resolve this, but please let me know if there's any other info I can provide to assist in troubleshooting etc. Any assistance in completing the Arrow phase of this tutorial would be very much welcomed and appreciated! :)

[nicholejeannine]

Discovered this works .... it's kind of a jenky solution, because the positioning of the Arrow components is now done in the constructor, and is hard-coded in. 👎 But, changing Arrow.js and Carousel.js to the following is working for now:

/*
Arrow.js
*/

var DOMElement = require('famous/dom-renderables/DOMElement');
// var Node = require('famous/core/Node');

// Altered to match the (working) method signatures of Pager.js and Dots.js

function Arrow(node, options) {
this.node = node;
this.direction = options.direction;

   var arrowNode = node.addChild();
   arrowNode.setSizeMode(1, 1)
   arrowNode.setAbsoluteSize(40, 40);

   if (this.direction === '1') {
       arrowNode.setPosition(40, 0, 0);
       arrowNode.setAlign(0, .5, 0);
       arrowNode.setMountPoint(0, .5, 0);
   } else if (this.direction === '-1') {
       arrowNode.setPosition(-40, 0, 0);
       arrowNode.setAlign(1, .5, 0);
       arrowNode.setMountPoint(1, .5, 0);
   }

   this.el = new DOMElement(arrowNode);
   this.el.setProperty('color', 'white')
   this.el.setContent(this.direction === '1' ? '<' : '>');
   this.el.setProperty('fontSize', '40px');
   this.el.setProperty('lineHeight', '40px');
   this.el.setProperty('cursor', 'pointer');
   this.el.setProperty('textHighlight', 'none');
   this.el.setProperty('zIndex', '2');

}
//Arrow.prototype = Object.create(Node.prototype);
//Arrow.prototype.constructor = Arrow;

module.exports = Arrow;

/*
Carousel.js
*/

var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
var Arrow = require('./Arrow.js');
var Pager = require('./Pager.js');
var Dots = require('./Dots.js');

function Carousel(selector, data) {
this.context = FamousEngine.createScene(selector);
this.root = this.context.addChild();
this.pageData = data.pageData;

// Altered calls to Arrow constructor to correspond to altered method signature.
this.arrows = {
    'back': new Arrow(this.root.addChild(), {'direction': '-1'}),
    'next': new Arrow(this.root.addChild(), {'direction': '1'})
};
 this.pager = new Pager(this.root.addChild(), { pageData: this.pageData });
this.dots = new Dots(this.root.addChild(), { numPages: this.pageData.length });
 _positionComponents.call(this);

}

function _positionComponents() {
// Arrow positioning (currently in constructor, not needed here)
// this.arrows.back.setSizeMode(1,1)
// this.arrows.back.setAbsoluteSize(40, 40);
// this.arrows.back.setPosition(40, 0, 0);
// this.arrows.back.setAlign(0, .5, 0);
// this.arrows.back.setMountPoint(0, .5, 0);
// this.arrows.next.setSizeMode(1,1)
// this.arrows.next.setAbsoluteSize(40, 40);
// this.arrows.next.setPosition(-40, 0, 0);
// this.arrows.next.setAlign(1, .5, 0);
// this.arrows.next.setMountPoint(1, .5, 0);

this.dots.node.setSizeMode(1,1)
this.dots.node.setAbsoluteSize(null, 20);
this.dots.node.setPosition(0, -50, 0);
this.dots.node.setAlign(.5, 1, 0);
this.dots.node.setMountPoint(.5, 1, 0);
this.pager.node.setAlign(.5, .5, 0);
this.pager.node.setMountPoint(.5, .5, 0);

}

module.exports = Carousel;