Uncaught TypeError: Cannot read property 'appendChild' of undefined when changing view/route in SPA
Closed this issue · 6 comments
Hello! Love your library!
I've come across an issue when using bricklayer in a SPA (using Aurelia as the MVC framework). Using two simple routes/views: one is a 'menu' route/view with 2 instances of bricklayer for 2 different "module" menus on the same page. Bricklayer is initialized with the following after attaching the template/DOM to the window.
var bricklayer = new Bricklayer(document.querySelector('#bricklayer-m' + mid));
where mid is the module id, thus initializing bricklayer on both #bricklayer-m0 and #bricklayer-m1. Works perfect. Using a custom on('breakpoint') listener, columnCount shows the correct number when a breakpoint is reached.
I then leave this menu route/view, going to a different route/view in the SPA, and then come back to the menu route/view again. The menu is built again and bricklayer is initialized again for each instance. Again, bricklayer appears to be working fine, like above.
However, I'm now get this additional error whenever I resize the browser (Chrome). This error will fire twice on every browser resize, not just at the predefined breakpoints.
Uncaught TypeError: Cannot read property 'appendChild' of undefined
(anonymous function) @ bricklayer-node.js:147
Container.reorderElements @ bricklayer-node.js:145
(anonymous function) @ bricklayer-node.js:100
triggerEvent @ bricklayer-node.js:20
Container.checkColumnCount @ bricklayer-node.js:123
(anonymous function) @ bricklayer-node.js:98
The custom on('breakpoint') listener displays columnCount as NaN. It's almost as if it's still looking for the two initial bricklayer instances, but is unable to find them (as they've been removed and reinitialized again upon changing routes).
Any thoughts on this? I've also tried to delete each instance of bricklayer with bricklayer = null as well before navigating away from the menu view/route, but no luck there either. If more info is needed, let me know...thanks!
Have you tried with browser version? (bricklayer.js) I'll inspect if -node version is broken.
@f Haven't checked this with bricklayer.js. I'll see if I can when I get a chance.
@nathan-j-fiedler Cannot read property 'appendChild' of undefined error happens when Bricklayer cannot find the element. I'll see if it caused by Bricklayer or the implementation how you used it.
@f Same results with bricklayer.js
rebuild and destroy methods needed.
I think those two methods will be a great addition to an already awesome library! Thanks!