Search code examples
meteoriron-router

onRendered triggers Exception from Tracker afterFlush - function ReferenceError: dragula is not defined


I am having trouble importing dragula correctly, using the ahref:dragula package. It works just fine, until I manually refresh the browser page. When I do, I get the following error :

debug.js:41 Exception from Tracker afterFlush function:
debug.js:41 ReferenceError: dragula is not defined
    at .<anonymous> (tasks.js:52)
    at blaze.js:3302
    at Function.Template._withTemplateInstanceFunc (blaze.js:3643)
    at fireCallbacks (blaze.js:3298)
    at .<anonymous> (blaze.js:3391)
    at blaze.js:1752
    at Object.Blaze._withCurrentView (blaze.js:2183)
    at blaze.js:1751
    at Object.Tracker._runFlush (tracker.js:505)
    at onGlobalMessage (setimmediate.js:102) 

Reading around, I stumbled upon this question/answer, which makes me think the route might need a waitOn of some sort, I just don't get what exactly I should be waiting on. Following are a few pieces of my code I have cleaned up for readability, hopefully I didn't strip out any essential information. So, here is what my route definition currently looks like.

Router.route('/', function () {
  this.render('Home');
});

And the templates...

<template name="home">
  {{ #if currentUser }}
    {{> tasks }}
  {{ /if }}
</template>

<template name="tasks">
    <div class="row">
      <div id="activeTasks">
        <!-- stuff -->
      </div>
    </div>
  </div>
</template>

Finally, the onRendered function itself.

Template.tasks.onRendered(function() {
  this.drake = dragula([this.find('#activeTasks')]);
});

Solution

  • Based on this discussion, I have found a workaround that consists in wrapping by dragula definition in a Meteor.setTimeout function.

    The resulting onRendered function :

    Template.tasks.onRendered(function() {
      var self = this;
      Meteor.setTimeout(function() {
        self.drake = dragula([self.find('#activeTasks')]);
      }, 250);
    });