SlexAxton / require-handlebars-plugin

A plugin for handlebars in require.js (both in dev and build)
804 stars 202 forks source link

r.js optimizer build fails with 'Handlebars is not defined' #99

Closed poshaughnessy closed 11 years ago

poshaughnessy commented 11 years ago

Hi, please could you help me? This is the first time I'm trying to use the require.js optimizer, so I'm probably doing something wrong, but although everything works fine with the site in development, I'm getting an error when I run

r.js -o build-config.js:

Error:

Tracing dependencies for: main
ReferenceError: Handlebars is not defined
In module tree:
    main
      router
        views/studentHomePageView
          views/toolbarView
            hbs

ReferenceError: Handlebars is not defined
In module tree:
    main
      router
        views/studentHomePageView
          views/toolbarView
            hbs

    at Object.eval (eval at <anonymous> (/usr/local/lib/node_modules/requirejs/bin/r.js:13687:38), <anonymous>:649:1)

My main.js looks like this:

require.config({

    paths: {
        backbone: 'lib/backbone-min',
        bootstrap: 'lib/bootstrap.min',
        colorbox: 'lib/jquery.colorbox',
        hammer: 'lib/hammer.min',
        Handlebars: 'lib/handlebars',
        hbs: 'lib/hbs',
        jquery: 'lib/jquery-1.9.1.min',
        jqueryhammer: 'lib/jquery.hammer',
        jqueryjpanelmenu: 'lib/jquery.jpanelmenu.mod',
        localstorage: 'lib/backbone.localStorage-min',
        select2: 'lib/select2.min',
        underscore: 'lib/underscore-min'
    },

    shim: {
        backbone: {
            deps: ['underscore', 'jquery'],
            exports: 'Backbone'
        },
        Handlebars: {
            exports: 'Handlebars'
        },
        hbs: {
            deps: ['Handlebars']
        },
        jquery: {
            exports: '$'
        },
        jqueryhammer: {
            deps: ['jquery', 'hammer']
        },
        jqueryjpanelmenu: {
            deps: ['jquery']
        },
        select2: {
            deps: ['jquery'],
            exports: 'Select2'
        },
        underscore: {
            exports: '_'
        }
    },

    // Config for Handlebars plugin.
    hbs: {
        disableI18n: true
    }

});

require([
    'jquery',
    'jqueryhammer',
    'jqueryjpanelmenu',
    'backbone',
    'localstorage',
    'Handlebars',
    'app',
    'router'
], function($, Hammer, jQueryJPanelMenu, Backbone, localstorage, Handlebars, app, Router) {

   ...

});

My build-config.js looks like this:

({
    baseUrl: 'js',
    name: 'main',
    mainConfigFile: 'js/main.js',
    out: 'main-built.js'
})

My directory structure looks like this:

./build-config.js
./js
./js/app.js
./js/collections
./js/collections/books.js
./js/collections/highlights.js
./js/collections/questions.js
./js/collections/users.js
./js/data
./js/data/tags.js
./js/lib
./js/lib/backbone-min.js
./js/lib/backbone.localStorage-min.js
./js/lib/bootstrap.min.js
./js/lib/hammer.min.js
./js/lib/handlebars.js
./js/lib/hbs
./js/lib/hbs/i18nprecompile.js
./js/lib/hbs/json2.js
./js/lib/hbs/underscore.js
./js/lib/hbs.js
./js/lib/jquery-1.9.1.min.js
./js/lib/jquery.colorbox.js
./js/lib/jquery.hammer.js
./js/lib/jquery.jpanelmenu.mod.js
./js/lib/require.js
./js/lib/select2.min.js
./js/lib/underscore-min.js
./js/main.js
./js/models
./js/models/book.js
./js/models/chapter.js
./js/models/highlight.js
./js/models/mainModel.js
./js/models/question.js
./js/models/user.js
./js/router.js
./js/template
./js/template/courseContent
./js/template/courseContent/inlineQuestion.hbs
./js/template/courseContent/menu.hbs
./js/template/courseContent/selectionMenu.hbs
./js/template/helpers
./js/template/helpers/debug.js
./js/template/helpers/equals.js
./js/template/helpers/truncate.js
./js/template/questionAndAnswer
./js/template/questionAndAnswer/comment.hbs
./js/template/questionAndAnswer/question.hbs
./js/template/questionAndAnswer/questionThread.hbs
./js/template/toolbars
./js/template/toolbars/courseContent.hbs
./js/template/toolbars/general.hbs
./js/template/toolbars/popupPanels.hbs
./js/template/toolbars/question.hbs
./js/template/toolbars/userProfile.hbs
./js/views
./js/views/courseContent
./js/views/courseContent/bookView.js
./js/views/courseContent/highlightView.js
./js/views/courseContent/inlineQuestionView.js
./js/views/courseContent/menuView.js
./js/views/courseContent/selectionMenuView.js
./js/views/courseContentPageView.js
./js/views/courseHomePageView.js
./js/views/questionAndAnswer
./js/views/questionAndAnswer/questionThreadView.js
./js/views/questionPageView.js
./js/views/studentHomePageView.js
./js/views/toolbarView.js

The top of toolbarView looks like this:

define([
    'jquery',
    'underscore',
    'backbone',
    'app',
    'Handlebars',
    'hbs!template/toolbars/courseContent',
    'hbs!template/toolbars/general',
    'hbs!template/toolbars/question'
], function($, _, Backbone, app, Handlebars, CourseContentToolbar, GeneralToolbar, QuestionToolbar) {

I'm using require.js v2.1.5, handlebars v1.0.0-rc.3, hbs v0.4.0 and node v0.10.0.

Anyone know what could be wrong? Thanks in advance!

poshaughnessy commented 11 years ago

Sorry, I thought I was using require.js v2.1.5, but turned out I had only updated the client JS file, not the npm-installed r.js. Looks like it works fine with r.js v2.1.5 and hbs v0.4.0 :-D

Sorry if I wasted anyone's time.