Error in Stack.js when <Stack> component only contains one child component

[dvmorris]

I was playing around with Stanza today, and I got an error when I ran an app with the <Stack> component containing only one sub-component. The error was on line 85 of Stack.js:

return _lodash2.default.first(this.props.children).props.index;

It looks like this.props.children contains the actual child object in that case, rather than an array containing one object, which causes this function to fail.

I'm fairly new to meteor, so I might be missing something else, but this should be fairly easy for you to reproduce in a test project.

[Chun-Yang]

Hey @dvmorris You are probably the first user out of our company right now! So, thank you for trying this package!

Can you publish the whole log stack?

[dvmorris]

No problem, it's a really interesting approach, and I'm looking forward to using it.

I will post a sample project in a few minutes.

[dvmorris]

Here is a design.zip file from WebFlow that demonstrates the issue. Steps to reproduce (assuming stanza is already installed), and the design.zip file is in your ~/Downloads folder:

cd ~
meteor create stanza-test
cd stanza-test
stanza -c
meteor npm install
mv ~/Downloads/design.zip ~/stanza-test/design.zip
stanza -u

For now, you also have to manually add accounts-base and accounts-password to .meteor/packages to get the app to run.

meteor

Open the web browser to http://localhost:3000/ and view the console output:

Uncaught TypeError: Cannot read property 'props' of undefined
getFirstLayerIndex @ Stack.js:85
getActiveLayerIndex @ Stack.js:90
render @ Stack.js:101
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js:815
_renderValidatedComponent @ ReactCompositeComponent.js:841
performInitialMount @ ReactCompositeComponent.js:351
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:357
mountComponent @ ReactCompositeComponent.js:244
mountComponent @ ReactReconciler.js:46
mountComponentIntoNode @ ReactMount.js:102
perform @ Transaction.js:136
batchedMountComponentIntoNode @ ReactMount.js:123
perform @ Transaction.js:136
batchedUpdates @ ReactDefaultBatchingStrategy.js:63
batchedUpdates @ ReactUpdates.js:98
_renderNewRootComponent @ ReactMount.js:286
_renderSubtreeIntoContainer @ ReactMount.js:365
render @ ReactMount.js:386
(anonymous function) @ main.jsx:7
maybeReady @ startup_client.js:26
loadingCompleted @ startup_client.js:38
[design.zip](https://github.com/poetic/stanza/files/298459/design.zip)

[dvmorris]

Oh, here is an explanation from the React docs: https://facebook.github.io/react/tips/children-props-type.html

I guess this won't be a common issue, because you wouldn't use a <Stack> with one item in it, but it might be worth putting some code in the class to check for that.