Tuesday, April 08, 2014

My Meteor App Upgrade from 0.7.2 to 0.8

As a matter of hoping to help someone who is also doing the upgrade of their Meteor app from .72 to .8 I have recorded my experience. After starting my app and getting the notification that 0.8 is available I updated Meteor. After restarting the app, I got the following error:
=> Errors prevented startup:
While building the application:client/views/stuff/stuff_submit.html:6: Only certain elements like BR, HR, IMG, etc. (and foreign elements like SVG) are allowed to self-close...Your request here."/>         </div>     ...                        ^
While building package `accounts-ui-bootstrap-dropdown`:error: no such package: 'spark'login_buttons.html:89: Only certain elements like BR, HR, IMG, etc. (and foreign elements like SVG) are allowed to self-close...n-buttons-padding" />   {{/unless}}                        ^
While building package `iron-router`:error: no such package: 'universal-events'
A quick look around stackoverflow my thinking was to brute force the update concerning iron-router with .8. While this is likely not the preferred method of many, here is what I did:
meteor remove iron-router
rm -rf packages/iron-router
mrt update
mrt add iron-router


After doing that I attempted a restart of the app and got the following error:
While building the application:client/views/stuff/stuff_submit.html:6: Only certain elements like BR, HR, IMG, etc. (and foreign elements like SVG) are allowed to self-close...Your request here."/>         </div>     ...
I changed <textarea name="request" type="text" value="" style="width:50%;" placeholder="Your stuff here.">
to
<textarea name="request" type="text" value="" style="width:50%;" placeholder="Your stuff here."></textarea>


Then, in the router.js file I changed:
var routeName = this.context.route.name;
to
var routeName = this.route.name;


In the main.html file I changed:
{{layout}} to {{> layout}}


I then got the following error:
Uncaught Error: Couldn't find a Layout component in the rendered component tree
After looking around and found this at Stackoverflow
and removed the  {{> yield}} from the layout.html file which holds the layout template.


Now, the page will render with the header but where the layout template that used to render correctly, the rest of the page was not rendering.


When adding the {{> yield}} back in the layout.html file, there is an error in /packages/blaze-layout/layout.js file on line 373. This is where the "Couldn't find a Layout component in the rendered component tree" error is thrown. After looking on the updated Discover Meteor book in the Router chapter. The Router.configure has changed from  layout: 'layout' to  layoutTemplate: 'layout'. I also changed the before: function() in the Router.configure to onBeforeAction: function(). Moreover, I changed after:function() to onAfterAction: function as well as commenting out the this.render(page) call. Then, I removed the body tag altogether from the client/main.html file as stated in the router chapter. Now, the layout template was at least rendering correctly but links in the page using the Handlebars pathFor was not forming links properly. Looking at the browser console I noted that I was getting a number of errors:
Exception in Meteor UI: TypeError: Cannot read property 'params' of undefined    at Object.processPathArgs (http://localhost:3000/packages/iron-router.js?a4167ac4d12a73891d8a9b8c57419a347da0ee12:2200:22)    at Object._.extend.pathFor (http://localhost:3000/packages/iron-router.js?a4167ac4d12a73891d8a9b8c57419a347da0ee12:2227:34)    at http://localhost:3000/packages/ui.js?b523ef986d3d39671bcb40319d0df8982acacfe8:2838:23    at Spacebars.call (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:173:18)    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:110:25)    at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?5d478ab1c940b6f5a88f78b8adc81a47f022da77:114:39)    at HTML.A.href (http://localhost:3000/client/views/stuff/template.stuff_item.js?e15ce9378850d2ce553c8c60647642a543534557:58:30)    at http://localhost:3000/packages/htmljs.js?697b0dd0fbdd1f8984dffa3225121a9b7d0b8609:254:14    at callWithNoYieldsAllowed (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:74:5)    at _.extend._compute (http://localhost:3000/packages/deps.js?7afb832ce6e6c89421fa70dc066201f16f9b9105:212:7)


The fix was to do the following in the stuff_item.html and encouragement.html file: I changed {{pathFor 'encouragementSubmit' this}} to {{pathFor 'encouragementSubmit' params=this}}.

Now all appears to be functioning. I hope that this will be of some help to others!  :-)


No comments: