Why do i have to use require('bloodhound-js') in my code?

Hi,

I have been searching the forums but dit not get a awnser. Thats why im posting this.

I have been playing with laravel + laravelmix a little bit. i do not understand how the importing works.

In my app JS i have: require('bloodhound-js'); require('typeahead.js');

typeahead needs bloodhound.. so after that my javascript gets compiled (run dev)

But now i have made a custom file with the following code

jQuery(document).ready(function($) { // Set the Options for "Bloodhound" suggestion engine var engine = new Bloodhound({ remote: { url: '/users/search?q=%QUERY%', wildcard: '%QUERY%' }, datumTokenizer: Bloodhound.tokenizers.whitespace('q'), queryTokenizer: Bloodhound.tokenizers.whitespace });

$(".search-input").typeahead({
    hint: true,
    highlight: true,
    minLength: 1
}, {
    source: engine.ttAdapter(),

    // This will be appended to "tt-dataset-" to form the class name of the suggestion menu.
    name: 'usersList',

    // the key from the array we want to display (name,id,email,etc...)
    templates: {
        empty: [
            '<div class="list-group search-results-dropdown"><div class="list-group-item">Nothing found.</div></div>'
        ],
        header: [
            '<div class="list-group search-results-dropdown">'
        ],
        suggestion: function (data) {
            return '<a href="' + data.firstname + '" class="list-group-item">' + data.name + '- @' + data.lastname + '</a>'
        }
    }
});

});

this file is in: resources/assets/js/users/users.js

I include this file in app.js using: require('./users/users');

Ok wel.. everything is compiled no errors, but when i run the code on the webpage it says:

Uncaught ReferenceError: Bloodhound is not defined at HTMLDocument. (app.js?id=b68e9a1efa08654c1027:33660) at mightThrow (vendor.js?id=d58520bfb113ed22d55e:10095) at process (vendor.js?id=d58520bfb113ed22d55e:10163)

But when i add: var Bloodhound = require('bloodhound-js'); at top of my custom JS file it works.

I do not understand this behaviour,, i already require it in app.js - why do i need to add it also on top of my code? - or is this how it works?

Also... typeahead works... i do not to require this in my code because its required in app.js . - so why does this not work for bloodhound?

Libs: https://www.npmjs.com/package/bloodhound-js https://www.npmjs.com/package/typeahead