typeahead.js: RequireJS can't load typeahead.js module

RequireJS expects the module name to be delivered without an extension and when an extension is provided it is considered an absolute path, relative to the domain name and not the base URL.

I’ve just updated typeahead.js from version 0.10.5 to 0.11.1 and each time RequireJS will try to load /typeahead.js and get a 404 since no file exists in this directory (I’m using the typeahead.bundle file).

You also cannot create a path for typeahead.js, paths in RequireJS must NOT end with a file extension.

Can you please rename the module to typeahead without the .js extension?

Thanks

About this issue

Original URL
State: open
Created 9 years ago
Reactions: 2
Comments: 30

Commits related to this issue

Remove .js from UMD module name Fixes twitter/typeahead.js#1211 — committed to alampros/typeahead.js by alampros 9 years ago
Remove '.js' suffix from AMD module ID. Fixes #1211. — committed to sirianni/typeahead.js by sirianni 9 years ago
removed .js suffix in define, because requirejs has problems with loading typeahead see: https://github.com/twitter/typeahead.js/issues/1211 — committed to Yobikap/typeahead.js by deleted user 9 years ago
Fix old amd module loading issues (https://github.com/twitter/typeahead.js/issues/1211) — committed to AubreyHewes/typeahead.js by AubreyHewes 9 years ago

Most upvoted comments

Here’s another workaround, without the need to add a plugin. Just merge this into your require config:

paths: {
    // define the path as you would with any other AMD module
    typeahead: 'bower_components/typeahead.js/dist/typeahead.jquery'
},
shim: {
    typeahead: {
        deps: [ 'jquery' ],
        init: function ($) {
            return require.contexts._.registry['typeahead.js'].factory( $ );
        }
    }
}

jpommerening on Aug 6, 2015

The fix mentioned at http://www.bluepage.me/case/4/ works for me.

It’s a combination of @jpommerening’s fix and you must load typeahead and bloodhound JS separately. Don’t use the bundle.

In require js config:

'typeahead': 'vendors/typeahead.jquery',
'bloodhound': 'vendors/bloodhound'

Require js shims:

typeahead:{
    deps: ['jquery'],
    init: function ($) {
        return require.s.contexts._.registry['typeahead.js'].factory( $ );
    }
},
bloodhound: {
   deps: ['jquery'],
   exports: 'Bloodhound'
}

Finally, include both scripts:

require(['typeahead', 'bloodhound'], function(typeahead, Bloodhound){
[Insert typeahead code]]
});

depiction on Jan 13, 2016

@jpommerening should be return require.s.contexts._.registry['typeahead.js'].factory( $ );

frankleng on Aug 9, 2015

👍 to having this resolved soon. The module definition needs to be typeahead, without extension, like any other AMD module…

peteromano on Jul 6, 2015