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

Here is my config file :

requirejs.config({
  baseUrl: "/js/dist",
  paths: {
    jquery: "../bower_ponents/jquery/dist/jquery.min",
    bootstrap: "../bower_ponents/bootstrap/dist/js/bootstrap.min",
    typeahead: "../bower_ponents/bootstrap3-typeahead/bootstrap3-typeahead.min",
    validator: "../bower_ponents/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

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

Here is my config file :

requirejs.config({
  baseUrl: "/js/dist",
  paths: {
    jquery: "../bower_ponents/jquery/dist/jquery.min",
    bootstrap: "../bower_ponents/bootstrap/dist/js/bootstrap.min",
    typeahead: "../bower_ponents/bootstrap3-typeahead/bootstrap3-typeahead.min",
    validator: "../bower_ponents/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

• javascript
• jquery
• twitter-bootstrap-3
• requirejs

• Getting the same error, tried everything. Reverted back to an older version, 0.9.3 and that managed to make it work. – Frisbetarian-Support Palestine Commented Aug 6, 2015 at 14:17

2 Answers 2

What version of typeahead are you using?

If it is 0.11.1:

The current version of typeahead (version 0.11.1) is inpatible with requirejs due to incorrect module definition, see here: https://github./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 patibility.

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.

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