Need Help Loading Dat-GUI with Meteor.js

Question

I am trying to load Dat-GUI : https://github.com/dataarts/dat.gui with my meteor project. I added the dat-GUI source in the client/lib folder. Here is my code:

Template.EditorControllbar.rendered = function () {
    var controllBar = document.getElementById('controllbar'),
        gui, folder, controller;

    // Create GUI
    gui = new dat.GUI({autoPlace:false});
    controllBar.appendChild(gui.domElement);

    // Create folders
    var renderFolder = gui.addFolder('Render'),
    meshFolder = gui.addFolder('Mesh'),
    lightFolder = gui.addFolder('Light'),
    exportFolder = gui.addFolder('Export');

};

When I run the server I get the following error:

Exception from Deps afterFlush function function: ReferenceError: dat is not defined
    at Object.Template.EditorControllbar.rendered (http://localhost:3000/client/views/toons/toon_edit/editor_controllbar/editor_controllbar.js?5613eb3f7dfe2c5aed33925dfe2970dcc11a04b4:33:15)
    at http://localhost:3000/packages/ui.js?9419ac08328918a04e7a49464a988d45f851e1b0:439:23
    at _assign.flush (http://localhost:3000/packages/deps.js?4a82362ae66e863a1c1a8b0a5fec6f665e2038d1:348:13) debug.js:4

The same code works on codepen though: http://codepen.io/praneybehl/pen/DabKv

Does anyone know how can I load Dat-GUI with Meteor. Any help will be highly appreciated.

Thanks in advance, Praney

Answer 1

You added the file https://github.com/dataarts/dat.gui/blob/master/build/dat.gui.min.js in client/lib? Meteor will wrap all js-files in a function, so var-variables in js-files won't be visible in other files, so you can't use the dat variable if you add the file this way. Instead, you need to add the file in the client/compatibility folder. js-files in this folder won't be wrapped in a function, so the var variable will be a global variable, and you can use it in other files.