TypeError: $(...).typeahead is not a function with RequireJS

Question

I'm using RequireJS in order to load my dependencies.

Here is my config file :

requirejs.config({
  baseUrl: "/js/dist",
  paths: {
    jquery: "../bower_components/jquery/dist/jquery.min",
    bootstrap: "../bower_components/bootstrap/dist/js/bootstrap.min",
    typeahead: "../bower_components/bootstrap3-typeahead/bootstrap3-typeahead.min",
    validator: "../bower_components/bootstrapvalidator/dist/js/bootstrapValidator.min",
    openlayers: "../vendor/openlayers/OpenLayers"
  },
  shim: {
    bootstrap: {
      deps: ["jquery"]
    },
    validator: {
      deps: ["bootstrap"]
    },
    openlayers: {
      exports: "OpenLayers"
    }
  }
});

And a part of my main application file :

define(["jquery", "bootstrap", "openlayers", "./popup", "typeahead"], function($, Bootstrap, OpenLayers, Popup) {
   (...)
   $("#textSearch").typeahead("destroy");
   (...)
});

Inspecting with Firebug, I can see that all dependencies are loaded. But calling typeahead() on my search textbox outputs the following message: "TypeError: $(...).typeahead is not a function"

I can't figure out this error, since all dependencies (so does typeahead) are loaded.

Can you help me ? Thanks in advance

Answer 1

What version of typeahead are you using?

If it is 0.11.1:

The current version of typeahead (version 0.11.1) is incompatible with requirejs due to incorrect module definition, see here: https://github.com/twitter/typeahead.js/issues/1211

From the RequireJS docs:

The path that is used for a module name should not include an extension, since the path mapping could be for a directory. The path mapping code will automatically add the .js extension when mapping the module name to a path.

A temporary workaround until the library has been updated is to change where the library sets out it's AMD compatibility.

The file extension should be omitted or otherwise requireJS will consider the path to be an absolute path.

Change:

define("typeahead.js", [ "jquery" ], function(a0) {

to:

define("typeahead", [ "jquery" ], function(a0) {

Hopefully the library will be updated soon, in the meantime, hope this helps.

Answer 2

What if instead of the key typeahead you use bootstrap3-typeahead? See https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/106