Bootstrap .dropdown() "Uncaught TypeError: undefined is not a function"

Question

I know this question has been asked before, but somehow none of the fixes for other people have worked for me. I have a feeling it has something to do with importing my plugins. When clicking a field in a bootstrap dropdown box I get "undefined is not a function" in the console for this line of code:

$target.closest( '.btn-group' )
     .find( '[data-bind="label"]' ).text( $target.text() )
        .end()
     .children( 'dropdown-toggle' ).dropdown('toggle');

Here's my import code in my HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="application/javascript" data-main="static/js/main" src="static/js/libs/require/2.1.11/require.js"></script>
<script src="static/js/libs/bootstrap/bootstrap.min.js"></script>
<link href="static/css/bootstrap.min.css" media="screen" rel="stylesheet" type="text/css">

Whenever I click the dropdown box I also get this error in the "Network" tab of my console, it says that the request was cancelled:

file:///home/chad/.config/google-chrome/Default/Extensions/gkojfkhlekighikafcpjkiklfbnlmeio/1.6.222_0/js/jquery.min.map

Any help on this would be greatly appreciated! I've been pulling my hair out over it for hours.

Answer 1

Long shot here, but are you using the chrome extension called "Hola" ? I noticed this message

Denying load of chrome-extension://gkojfkhlekighikafcpjkiklfbnlmeio/js/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

while testing a web app im developing and found out that it was that extension causing the error, just disabled it and the message didnt appear anymore. Im also using bootstrap, dont know if its related to that.

The code after the "//" is the id of the extension, you can compare it with the ids in the Chrome extension configuration, see this image and notice the id is the same as in the error.

Hope this helps.

Answer 2

Maybe your script tags are out of order?

<script type="application/javascript" data-main="static/js/main" src="static/js/libs/require/2.1.11/require.js"></script>

Which includes the call for dropdown() is probably being executed before:

<script src="static/js/libs/bootstrap/bootstrap.min.js"></script>

Which defines the dropdown() method.

Does the code in the require app get wrapped in a $(function() {})?