Local/Global Underscore issue using require.js. (Bower package)

[mattma]

This is a simple feature enhancement request. First, let me explain what went wrong, then, I will let you know how I fix it.

I am using bower to install all my javascript package including require-handlebars-plugins. Everything works great. I am also using backbone.js, lodash.js, require.js for my application front end stack.

In my config, I am using lodash to replace underscore like this, 'underscore' : 'assets/vendor/lodash/lodash'.

When I use load hbs!... template file into my backbone app, it loads the files with 200 OK but it fades out with timeout on request. I tried all the stackoverflow, other google search and still could not figure out why. After lots of fail and learn, peers code reviews, I finally nail the problem.

In hbs.js source code, define 'underscore' is using my config.js 'underscore' map to lodash, then I change to the latest underscore 1.4.4, it still outputs the same problem ( timeout ). Then I switched to underscore.js in the project hbs/ folder. It works well. I think underscore.js 1.3.3 amd version works the trick.

To be able to work in my setup, I have to change two files :

hbs.js:20, change 'underscore' to './hbs/underscore'

hbs/i18nprecompile.js:2, change 'underscore' to './underscore'

Then my app works well with template hbs file, :)

Here is the problem I have. I modified the hbs source code, so that i won't be able to use bower to install this package. So i have to edit every time when I bower install this package.

How could I still use bower install require-handlebars-plugin, then still use the hbs local underscore, not my application defined 'underscore'?

Thanks for help!

[ianwremmel]

I've run into the same issue. Moreover, I've tried switching my project back to underscore#1.3.3 and tried pointing my project at the underscore in the require-handlebars-plugin directory. In both cases, different errors show up in the project (but the plugin itself seems to work).

Most of the other bower-enabled projects that I've examined seem to commit their compiled versions to their respective repositories. I've noticed several other tickets with path-related problems. Is committing the compiled version a possible solution to all of these problems?

[snrmwg]

Same issue. Will there be any fix?

[stuartmemo]

Just adding a "me too!!" @mattma - thanks for the workaround!

[mattma]

Any suggestions from the maintainers of the project? Thanks

[ianwremmel]

I was able to get around the issue by renaming underscore in my shim config. I'm using lodash, but the same solution should work for underscore as well:

require.config({
    paths: {
        ...
        lodash: '../../bower_components/lodash/lodash',
    },
    shim: {
        backbone: {
            deps: ['lodash', 'jquery'],
            exports: 'Backbone'
        },
        ...
    }
});

This gets around the problem, but feels wrong. For this and other reasons, I'm looking at getting away from Handlebars and likely moving back to plain old microtemplates.

[adambiggs]

You might be able to use the RequireJS map config to serve underscore to HBS and use lodash for the rest of your app.

[mattma]

@ianwremmel it won't work in my case because I am using 'underscore' but point to the lodash script. So I only have one name to work with.

@adambiggs This is a good idea and I am going to give it a try. But one thing that I am not sure, how about the require.js build, it is going to be OK and figure out the dependencies and all that? Have you ever tried it in your project?

[ianwremmel]

@mattma Assuming only your code, an not library code, needs to know it by the name 'underscore' and all your libraries are shimmed, I'm pretty sure you can choose any name you want, so everywhere I used 'lodash', you could use something like 'underscore-local' or 'underscore-renamed-because-my-templating-library-is-not-adequately-encapsulated'. Of course, this is clearly a hack and may require a massive find-and-replace. The map config option looks like a better way to go.