Using Jade package with export/import for meteor guide app structure


I am trying to write a tutorial on using the following tech stack:

  • mongo, meteor, coffeescript, blaze, jade, bootstrap

As a simpler example than the now pretty complex todos, I chose the leaderboard example.
I got an two file version running well with a file and a leaderboard.jade file.

I then tried to refactor it into multiple files following the same app structure than the meteor blaze tutorial. In this modular, refactored version, the template files do not generate any HTML and Google Chrome dev tool gives me the following error:

Uncaught Error: No such template: leaderboard
    at http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:3155:15
    at Blaze.View.<anonymous> (http://localhost:3000/packages/spacebars.js?hash=dcb91068ed863bb067d30163ef7df2825655ee2f:68:23)
    at http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:1875:20
    at Function.Template._withTemplateInstanceFunc (http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:3687:12)
    at http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:1873:29
    at Object.Blaze._withCurrentView (http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:2214:12)
    at viewAutorun (http://localhost:3000/packages/blaze.js?hash=891d5a10d82b5122032ced96aa7f478b9b1eeda3:1872:18)
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?hash=e52e5febdef644d89e21db20456ef53daa80b912:339:36)
    at new Tracker.Computation (http://localhost:3000/packages/tracker.js?hash=e52e5febdef644d89e21db20456ef53daa80b912:229:10)
    at Object.Tracker.autorun (http://localhost:3000/packages/tracker.js?hash=e52e5febdef644d89e21db20456ef53daa80b912:604:11)

Since the exact same template code and coffee helper and event code worked fined when it was all concatenated in two root files leaderboard.jade and, I pretty sure the problem is either:

  • my using import/export incorrectly though trying to match as closely as possible the meteor blaze tutorial
  • the jade package not working well with import/export declarations.

Has anyone tried to the two together and encountered a similar problem?

In this refactored version I have:

  • a file client/main.tpl.jade containing
  title Leaderboard
  • a file client/ containing
import '../imports/ui/'
  • a file imports/ui/body.tpl.jade containing
  • a file imports/ui/ containing
import { Template } from 'meteor/templating'
import './body.tpl.jade'
  • a file imports/ui/leaderboard/leaderboard.tpl.jade containing
             strong Leaderboard
            p Rank
            p Player
            p Score
        +each players
  • a file imports/ui/leaderboard/ containing:
import { Template } from 'meteor/templating'
import { aflLeaders } from '../../api/'
import './leaderboard.tpl.jade'
  players: -> aflLeaders.find {}, {sort: {score: -1, name: 1}}
  • a file imports/ui/player/player.tpl.jade containing
      p= rank
      p= name
      p= score
      button.btn-default vote
  • a file imports/ui/player/ containing
import { Template } from 'meteor/templating'
import { Player, Leaderboard, aflLeaders } from '../../api/'
import './player.tpl.jade'
  'click tr>td>button': ->
    @score = @score + 1
    aflLeaders.update {_id: @_id}, @

Since the server side is producing the correct initial leaderboard collection, I do not show here the content of the server and isopmorphic files:

  • server/

  • imports/api/startup/

  • imports/api/

I use the following packages:

meteor-base@1.0.4             # Packages every Meteor app needs to have
mobile-experience@1.0.4       # Packages for a great mobile UX
mongo@1.1.14                   # The database Meteor supports right now
blaze-html-templates@1.0.4    # Compile .html files into Meteor Blaze views
reactive-var@1.0.11            # Reactive variable for tracker
jquery@1.11.10                  # Helpful client-side library
tracker@1.1.1                 # Meteor's client-side reactive programming library

standard-minifier-css@1.3.2   # CSS minifier run for production mode
standard-minifier-js@1.2.1    # JS minifier run for production mode
es5-shim@4.6.15                # ECMAScript 5 compatibility for older browsers.
ecmascript@0.5.9              # Enable ECMAScript2015+ syntax in app code
shell-server@0.2.1            # Server-side component of the `meteor shell` command

autopublish@1.0.7             # Publish all data to the clients (for prototyping)
insecure@1.0.7                # Allow all DB writes from clients (for prototyping)

# dalgard:jade@0.5.4_1

Substituting the mquandalle:jade package with the dalgard.jade package advocated in the meteor guide has no effect on the probkem.


I have similar problem, and solved it using ‘require’ statement. Try adding this statement at the top of your .coffee file:

require ‘./leaderboard.tpl.jade’

I just changed all the import declarations of .tpl.jade files with require declarations but I got the same error :disappointed:

I am using the package CoffeeScript 1.11.1_3 which supports the ES6 inspired syntax for CoffeeScript modules, thanks to @GeoffreyBooth,
So I am not sure why using require instead of import would solve my problem (though you never know of course).

Thanks anyway

I managed to get around the problem by:

  • using only .jade file extensions instead of .tpl.jade extensions
  • using absolute paths instead of relative ones
  • moving up the leaderboard.jade file to the root folder level and including

into it

  • deleting the body.jade file that only contained that
  • deleting the that only contained imports but neither helper nor event handler but only imports
  • importing the inside to

It looks like dalgard:jade is currently out of date. The version at master is still using the build system from Meteor 0.9 which seems to be causing issues. There’s a PR at which you can merge in by hand locally to get it working.