import typeahead.js by Webpack 2

[adamasantares]

Hey,

I've lost many time to find a solution of "how to import Typeahead.js by Webpack2", so I hope this may save your time.

There are 2 problems:

1. By default typeahead.js will export "bundle" of 2 plugins from same file, so when you will import as defaul you will have undefined "Bloodhound"
2. The typeahead.js is checking AMD type first, so you will have error of import "Uncaught TypeError: Cannot set property 'Bloodhound' of undefined"

To solve these problems you need install "imports-loader" by command

npm i imports-loader --save-dev

It helps to disable "AMD" on loading modules.

Then you need to import plugins of Typeahead.js separately

require('imports-loader?define=>false!typeahead.js/dist/typeahead.jquery.min.js');
const Bloodhound = require('imports-loader?define=>false!typeahead.js/dist/bloodhound.min.js');

I done.

[bonesoul]

@adamasantares

i'm getting error; Uncaught TypeError: $(...).typeahead is not a function

with;

require('imports-loader?define=>false!typeahead.js/dist/typeahead.jquery.min.js'); const Bloodhound = require('imports-loader?define=>false!typeahead.js/dist/bloodhound.min.js');

  $('#searchbox').typeahead({
    hint: true,
    highlight: true,
    minLength: 2
  }, {});

any ideas?

[ghost]

Your closing braces should be () since you're not passing a secondary function parameter. Or maybe I' completely off. Just a thought.

On Tue, May 16, 2017 at 5:13 PM, Hüseyin Uslu notifications@github.com wrote:

@adamasantares https://github.com/adamasantares

i'm getting error; Uncaught TypeError: $(...).typeahead is not a function

with;

require('imports-loader?define=>false!typeahead.js/ dist/typeahead.jquery.min.js'); const Bloodhound = require('imports-loader?define=>false!typeahead.js/ dist/bloodhound.min.js');

$('#searchbox').typeahead({ hint: true, highlight: true, minLength: 2 }, {});

any ideas?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/twitter/typeahead.js/issues/1627#issuecomment-301917305, or mute the thread https://github.com/notifications/unsubscribe-auth/AX82ZrdqnOdeW9Ij1bFoqV7eG11qH-BPks5r6hF8gaJpZM4MpYxj .

-- Tyler J. Nilsson [Front-End Developer] (719) 722-7560

[bonesoul]

i just put it for convenience as it was long enough.

[ghost]

Oh okay makes sense. Then the error most likely has to deal with your file destination path. Possibly looking in a directory where the file is not located or has been moved.

There's my 2 cents hope it helps stranger.

​ -- Tyler N. [Front-End Developer]

On Tue, May 16, 2017 at 9:00 PM, Hüseyin Uslu notifications@github.com wrote:

i just put it for convenience as it was long enough.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/twitter/typeahead.js/issues/1627#issuecomment-301955581, or mute the thread https://github.com/notifications/unsubscribe-auth/AX82ZrWTY7fcMLGjcFdsmKUOT7RkYT2rks5r6kaegaJpZM4MpYxj .

-- Tyler J. Nilsson [Front-End Developer] (719) 722-7560

[jonasespelita]

npm i imports-loader --save-dev saved my life! Thank you so much!

[spolischook]

Use bloodhound-js to be able require it as module

[2DKot]

I fixed this by adding new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery', "window.jQuery": "jquery" }) to plugins list in webpack config. And then in my script file:

require('imports-loader?define=>false!../../../js/libs/typeahead/typeahead.jquery.min.js');
const Bloodhound = require('imports-loader?define=>false!../../../js/libs/typeahead/bloodhound.min.js');

[Isengo1989]

I am still getting this error

Uncaught ReferenceError: Bloodhound is not defined

I am using Webpack 4.25.1 and included this to my app.js

require('imports-loader?define=>false!../../node_modules/typeahead/typeahead.js'); const Bloodhound = require('imports-loader?define=>false!../../node_modules/bloodhound-js/dist/bloodhound.min');

Somebody an idea? Including the typeahead.bundle.js in the twig file just works fine.

[ahmed-bhs]

Still having the same issue :

TypeError: jqueryWEBPACK_IMPORTED_MODULE0default(…)(…).typeahead is not a function

[yshterev]

I have a vendor bundle providing globals to other bundles, using "webpack": "^4.19.1", This worked for me:

import Bloodhound from "bloodhound-js";
global.Bloodhound = Bloodhound;
require("imports-loader?exports=>false,define=>false!typeahead.js/dist/typeahead.jquery.js");

Note: exports=>false,define=>false and typeahead.jquery.js