RequireJS can't load typeahead.js module

[iMoses]

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

[jochenberger]

Same problem here.
Also the factory function is never called. Is there any specific reason for creating a named module?

[sirianni]

Not sure I agree with the original issue. Isn't a typical practice to define a path config for this? e.g.

  'typeahead': './vendor/typeahead.jquery',

However, I do agree with @jochenberger . Shouldn't the module register itself upon require rather than requiring the returned function be invoked?

[zhiyuanL]

I also have trouble loading typeahead module.
@sirianni I define a path config for the typeahead like you did, but when I tried to use typeahead in one of my module, I got TypeError $().typeahead is not defined
Bloodhound does not have this problem.

[sirianni]

Yes - I see now that @iMoses is spot-on. Using the js suffix in the module name breaks usage with requirejs. I was only able to workaround this by hacking the UMD stanza to remove the .js suffix:

In typeahead.jquery.js

        define("typeahead", [ "jquery" ], factory);

In my requirejs config.js:

'typeahead': './vendor/typeahead.jquery',

[zhiyuanL]

Thanks man!

[Joelkang]

+1 to @jochenberger's comment -- I'm rjs-optimising my files so the named module callback never gets called.

[DrColossos]

I had the same issue with the ".js" name. Removing it from the code as mentioned by others fixed the problem

[Jarlskov]

Yeah, what @DrColossos said.

[user24]

Yep. Is a real issue. requirejs sees the ".js" and doesn't look in the paths. That's probably more a problem with requirejs than typeahead - many libs have ".js" as a suffix. But still, nice to fix it here if we can.

[kbiesbrock]

Is it possible to "escape" the . (period)? "typeahead.js" or something?

[user24]

I can't see any way to do that, have tried a couple of possibles.

[JanWielemaker]

Thanks. This exchange ended a long search for me! Could this finally be resolved? Having to ask
users to install a bower component and then edit it is really not nice :-(

[peteromano]

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

[mcobzarenco]

+1

[ekh64]

Ran into this on my project as well. I'd rather not have the dependency added to the repo, so the quick fix won't suffice. I'd really appreciate it if this were resolved.

[peteromano]

We have a workaround, for the time being, by mapping 'typeahead' to a plugin/proxy file (with the path to the vendor file as argument for the sake of hardcoding things outside the config) in the rjs build file:

{
  map: {
    typeahead: 'src/plugins/typeahead!bower_components/typeahead.js/dist/typeahead.jquery' 
  }
}

And the plugin (to async load/return the actual 'typeahead.js' plugin):

define(function () {
  return {
    load: function (path, parentRequire, onload, config) {
      parentRequire([path], function () {
        parentRequire(['typeahead.js'], function (ret) {
          onload(ret);
        });
      });
    }
  };
});

define(['jquery', 'typeahead'], function ($) {
  console.log($.fn.typeahead) // typeahead is now a thing.
});

This shim will keep the dependency signature the same until the fix is made, but obviously requires the additional proxy (plugin) file, but if you need to roll this up in prod, the dependency should be included in the build anyway..

[atesgoral]

+1 @peteromano's workaround.

[jpommerening]

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( $ );
        }
    }
}

[frankleng]

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

[jpommerening]

@frankleng: Whoopsie, you're right!

[AubreyHewes]

require.s.contexts._.registry (et al) does not exist when building via almond so this is not a viable solution for requirejs contained apps via almond.

Possible solution is (via build) rewriting almond to expose waiting modules... this would entail the following:

_waiting is exposed via almond a la requirejs/almond/pull/66 (https://github.com/jrburke/almond/blob/ae58282adf441f59aadac8f6e6390760333d8fc3/almond.js#L406)

Via build; replace requirejs._defined = defined; with:

requirejs._defined = defined; requirejs._waiting = waiting; // expose waiting

(this is part of your build/gulp/grunt/etc)

And then:

"jquery-typeahead": {
    "deps": [ "jquery" ],
    init: function ($) {
        "use strict";

        // this is a temp fix due to the module name ending with a "dotjs"

        // DEV: requirejs has requirejs.s.contexts._.registry
        // PROD: almond build has requirejs._defined
        var modules = require._defined ? require._defined : require.s.contexts._.registry;

        if (!modules['typeahead.js']) {
            // WAITING IS ADDED BY FIX
            return require._waiting['typeahead.js'][2]( $ );
        }
        return modules['typeahead.js'].factory( $ );
    }
}

Or such like. Best is to fix the module name; solution seems so simple

This is a whole cluster f* due to an incorrect module name...?

Change the module name?

Though as this project seems (?) to be dead should look at fork https://github.com/corejavascript/typeahead.js > same problem has been duplicated.

corejavascript/typeahead.js#3

[charlouze]

Fix from @jpommerening is great but it would be better to strip ou the ".js" part of the module name.

[mcobzarenco]

@charlouze +1

[wilhen01]

Please fix this! Just take the .js out of the module name. I've edited the stanza in my copy to fix the issue.

[SylvainCorlay]

+1

[AubreyHewes]

project is dead and questions may be better placed at https://github.com/corejavascript/typeahead.js.. Posting "+1" does not help in any case.. except to irritate. Read the history; there are a multitude of fixes; max five loc fixes. Extra fix; add grunt/gulp rewrite tasks/rewrite source if it is such a breaking problem. We are programmers?

[wilhen01]

@AubreyHewes didn't realise this project was now dead. I've fixed the issue in my local copy but it'd be nice to have it fixed more permanently for version updates etc. Out of interest has it been fixed in the new fork?

EDIT: From what I can tell in the source the offending line has been changed.

[depiction]

@jpommerening, your work around helped, but now I'm getting an error that "Bloodhound is not defined". I'm using the bundle which includes both typeahead and bloodhound. The problem only existed when loaded via require JS.

[depiction]

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]]
});