Meteor throws error "Exception in defer callback: Error: Can't call non-function: [object Object]" when using flowrouter

Question

I am new to meteor and following a video tutorial. The problem is that this video tutorial doesn't uses ES6 fully. So no imports and exports. But I am making my meteor app using es6 features, specially imports and exports of modules.

So my project files are:

/lib/router.js:

FlowRouter.route("/", {
    name: 'home',
    action(){
        BlazeLayout.render("HomeLayout");
    }
});

FlowRouter.route("/test", {
    name: 'test',
    action(){
        BlazeLayout.render("MainLayout",{ main: "TestPage" });
    }
});

/imports/ui/layouts/HomeLayout.html:

<template name="HomeLayout">
    <header>
        <h1>My Recipe Book</h1>
        {{> loginButtons}}
    </header>
    <main>
        <div class="billboard">
            <h4>Organise your meals</h4>
        </div>
    </main>
</template>

/imports/ui/layouts/MainLayout.html:

<template name="MainLayout">
    <header>
        <h1>My Recipe Book</h1>
        {{> loginButtons}}
    </header>
    <main>
        {{ Template.dynamic template=main }}
    </main>
</template>

/imports/ui/pages/TestPage.html:

<template name="TestPage">
    I am a test....
</template>

/client/main.js:

import { Template } from 'meteor/templating';

import '/lib/router.js';

import '/imports/ui/layouts/MainLayout.html';
import '/imports/ui/layouts/HomeLayout.html';
import '/imports/ui/pages/TestPage.html';

Packages that I am using:

1- BlazeLayout

2- Flow-Router

3- accounts-ui

4- accounts-password

Now my problem is that when I open localhost:3000 I see my HomeLayout as expected. But when I go to localhost:3000/test, I am getting following error:

Exception in defer callback: Error: Can't call non-function: [object Object]
    at Spacebars.call (http://localhost:3000/packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:175:13)
    at Spacebars.mustacheImpl (http://localhost:3000/packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:106:25)
    at Object.Spacebars.mustache (http://localhost:3000/packages/spacebars.js?hash=65db8b6a8e3fca189b416de702967b1cb83d57d5:110:39)
    at ._render (http://localhost:3000/app/app.js?hash=9b7bb2e95b10af20d691075d259b8ad46bc15c1d:55:22)
    at doRender (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2027:25)
    at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1875:20
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:3687:12)
    at http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1873:29
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:2214:12)
    at viewAutorun (http://localhost:3000/packages/blaze.js?hash=ef41aed769a8945fc99ac4954e8c9ec157a88cea:1872:18)

This works totally well in the video tutorial, the video tutorial is from level up tuts and its quite famous too. But as I said its on older version of meteor so no es6. The meteor version I am using is 1.3.4.1.

Please help me over this as I am stuck here and cannot make progress.

Answer 1

Oh, found the problem. Missed a closed angular bracket in the handlebar syntax of {{Template.dynamic template=main}}. It should be {{> Template.dynamic template=main}}