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.

did you add `ecmascript` meteor package? – pahan Jun 28 '16 at 12:32 — pahan, Jun 28 '16 at 12:32
@pahan - yes of course – Vineet 'DEVIN' Dev Jun 28 '16 at 12:34 — Vineet 'DEVIN' Dev, Jun 28 '16 at 12:34

Vineet 'DEVIN' Dev · Answer 1 · 2016-06-28T18:45:03.407

3

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}}

edited Jun 28 '16 at 18:45

answered Jun 28 '16 at 15:02

Vineet 'DEVIN' Dev

1,183
1
10
35

score 0 · Answer 2 · answered Jun 28 '16 at 12:43

0

You do not need to import and export in your main.js file. Meteor does all that work for you. You can just delete main.js.

Instead, simply place your template html files in your client directory. Meteor will detect them automatically and your router will be able to access them.

answered Jun 28 '16 at 12:43

David Y. Stephenson

872
4
22
44

That way I won't be arranging my project properly. The main reason I am putting them in my imports folder is that I can clearly separate different pages in different folders. Also later on I may not use a particular template, or I may not want to import some templates for a particular user permission. – Vineet 'DEVIN' Dev Jun 28 '16 at 14:49
1

You can put templates in different directories inside `client` if you want, e.g. `client/views/layouts` and `client/views/pages`, – David Y. Stephenson Jun 28 '16 at 18:44

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

2 Answers2