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

Hi,

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 leaderboard.coffee 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 leaderboard.coffee, 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
head
  title Leaderboard
  • a file client/main.coffee containing
import '../imports/ui/body.coffee'
  • a file imports/ui/body.tpl.jade containing
body
  +leaderboard
  • a file imports/ui/body.coffee containing
import { Template } from 'meteor/templating'
import './body.tpl.jade'
  • a file imports/ui/leaderboard/leaderboard.tpl.jade containing
template(name="leaderboard")
  .table-responsive
    table.table.table-bordered.table-hover.table-condensed
      thead
        tr
          th(colspan="4")
            h2
             strong Leaderboard
       tr#sortButtonRaw
          th#sortButtonCell
            p Rank
          th
            p Player
          th(colspan="2")
            p Score
      tbody
        +each players
          +player
  • a file imports/ui/leaderboard/leaderboard.coffee containing:
import { Template } from 'meteor/templating'
import { aflLeaders } from '../../api/models.coffee'
import './leaderboard.tpl.jade'
Template.leaderboard.helpers
  players: -> aflLeaders.find {}, {sort: {score: -1, name: 1}}
  • a file imports/ui/player/player.tpl.jade containing
template(name="player")
  tr
    td
      p= rank
    td
      p= name
    td
      p= score
    td
      button.btn-default vote
  • a file imports/ui/player/player.coffee containing
import { Template } from 'meteor/templating'
import { Player, Leaderboard, aflLeaders } from '../../api/models.coffee'
import './player.tpl.jade'
Template.player.events
  'click tr>td>button': ->
    @score = @score + 1
    aflLeaders.update {_id: @_id}, @
    aflLeaders.rank()

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/main.coffee

  • imports/api/startup/startup.coffee

  • imports/api/models.coffee

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)

coffeescript@1.11.1_3
mquandalle:jade@0.4.9
# dalgard:jade@0.5.4_1
stylus@2.513.7
twbs:bootstrap@3.3.6

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

Thanks!

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 http://coffeescript.org/#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
body
  +leaderboard

into it

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

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 https://github.com/dalgard/meteor-jade/pull/2 which you can merge in by hand locally to get it working.