TypeError: $ (...). Typeahead non è una funzione con RequireJS

Question

Sto utilizzando RequireJS per caricare le mie dipendenze.

Ecco il mio file di configurazione:

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

E una parte del mio file dell'applicazione principale:

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

Ispezione con Firebug, vedo che tutte le dipendenze sono stati caricati. Ma chiamando typeahead() nella casella di testo di ricerca viene visualizzato il seguente messaggio: "TypeError: $(...).typeahead is not a function"

Non riesco a capire questo errore, dal momento che tutte le dipendenze (così come typeahead) vengono caricate.

Potete aiutarmi? Grazie in anticipo

Answer 1

Quale versione di typeahead stai usando?

Se è 0.11.1:

La versione corrente di typeahead (versione 0.11.1) è incompatibile con requirejs a causa di definizione del modulo non corretta, vedere qui: https://github.com/twitter/typeahead.js/issues/1211

Dalle RequireJS docs :

Il percorso utilizzato per il nome di un modulo non deve includere un'estensione, poiché la mappatura del percorso potrebbe essere per una directory. Il codice di mappatura del percorso aggiungerà automaticamente l'estensione .js durante il mapping del nome del modulo in un percorso.

Una soluzione temporanea fino all'aggiornamento della libreria è la modifica della posizione in cui la libreria definisce la compatibilità AMD.

L'estensione del file deve essere omessa o altrimenti requireJS considererà il percorso come un percorso assoluto.

Cambio:

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

a:

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

Speriamo che la biblioteca verrà aggiornato a breve, nel frattempo, speriamo che questo aiuta.

Answer 2

Cosa succede se al posto della chiave typeahead si utilizza bootstrap3-typeahead? Vedi https://github.com/bassjobsen/Bootstrap-3-Typeahead/issues/106