Bootstrap - import 'bootstrap'; breaks dropdown menu in Navbar

Help Requests
1
  1. Cloned the skeleton-navigation from git
  2. Chose the skeleton-typescript-webpack stack
  3. Restored packages and fixed issues with aurelia-validation
  4. Add to nav-bar.html the sample HTML from Bootstrap 3.3.7 Navbar for dropdown (just the
  5. code).
  6. Run the app and it works as should, the dropdown is functional
  7. Add import ‘bootstrap’; to welcome.ts
  8. Run the app and not it does not work, the dropdown is now broken and the submenu does not show

My ultimate goal was to get bootstrap tooltip to work. The steps above is how I was able to reproduce an error I’m having with my project. I want to simplify it and remove doubt about something within my project.

My question, how to get dropdown to work with import ‘bootstrap’; ? If I can’t get import ‘bootstrap’; to work in code then I can’t get tooltip to work.

2

@y2k4life can you share a repository so that I can look at it?

3

I noticed the validation was my own additions I removed them so that my repository would be more like the skeleton-navigation repository.

Here is my repository to reproduce the error.

https://github.com/y2k4life/aurelia-issue-bootstrap

4

I noticed using Chrome there is an additional Event Listener when import ‘bootstrap’; is used. It looks to be jQuery. If I remove the Event Listener it works. But I can’t have $(‘[data-toggle=“tooltip”]’).tooltip() without jQuery and Bootstrap.

EventListeners

Which points to this.

  if ( !( eventHandle = elemData.handle ) ) {
  	eventHandle = elemData.handle = function( e ) {

  		// Discard the second event of a jQuery.event.trigger() and
  		// when an event is called after a page has unloaded
  		return typeof jQuery !== "undefined" && jQuery.event.triggered !== e.type ?
  			jQuery.event.dispatch.apply( elem, arguments ) : undefined;
  	};
  }
5

Got It!

Don’t know why or what, but this was a try anything and everything until it sticks.

I read a blog post, unrelated other than Webpack and Bootstrap, In the blog article the individual components of Bootstrap was loaded. So, instead of loading Bootstrap I loaded collapse and tooltip. Also had to load $ from jQuery separately. My repository is updated to reflect these changes.

Instead of

import ‘bootstrap’

I changed to

import $ from 'jquery"
import ‘bootstrap/js/collapse’
import ‘bootstrap/js/tooltip’

image
image925×396 23 KB

1 Like
6

I was not happy with just leaving it alone without knowing. More trial and error. So, I tried to load all of the bootstrap JavaScript individually. Then commented them out one by one until I found the offending one. Ironically when I picked import ‘bootstrap/js/collapse’ I did not see the more logical option, import ‘bootstrap/js/dropdown’, which was a good thing, otherwise I would still be stuck. Why would I still be stuck you ask, when I went and commented out the individual JavaScript the offending JavaScript was… you guessed it import ‘bootstrap/js/dropdown’.

There is data-toggle=“dropdown” in the HTML which indicates it would need import ‘bootstrap/js/dropdown’ based on Bootstrap documentation. Instead that breaks it. When using import ‘bootstrap/js/collapse’; it works, which in theory it should not. :confused: :confounded:

<a href=“#” class=“dropdown-toggle” data-toggle=“dropdown”…

import $ from ‘jquery’;
import ‘bootstrap/js/affix’;
import ‘bootstrap/js/alert’;
import ‘bootstrap/js/button’;
import ‘bootstrap/js/carousel’;
import ‘bootstrap/js/collapse’;
// import ‘bootstrap/js/dropdown’;
import ‘bootstrap/js/modal’;
import ‘bootstrap/js/tooltip’;
import ‘bootstrap/js/popover’;
import ‘bootstrap/js/scrollspy’;
import ‘bootstrap/js/tab’;
import ‘bootstrap/js/transition’;

Remove the comment from import ‘bootstrap/js/dropdown’; and it breaks.

More experiments to be done, but regardless of why as to why this is not working I’m just glad I found it.

Another thought, how does it work without even using import anything

2 Likes
7

Found out it does not break, it just does not, how to say this, auto wire up the event. If you add the code below it will work with import ‘bootstrap/js/dropdown’. I just don’t know what the magic :mage: is that wires this up with HTML only and having no import ‘bootstrap’ in the JavaScript. How does it work with HTML only? What identifies the HTML as having data-toggle=“dropdown” and then knows to load import ‘bootstrap/js/dropdown’ and then to call ** $(‘.dropdown-toggle’).dropdown()**. Furthermore why does adding Bootstrap in JavaScript kill the magic leaving one confused.

attached() {
$(‘.dropdown-toggle’).dropdown()
}

detached() {
$(‘.dropdown-toggle’).dropdown(‘destroy’)
}

2 Likes
8

well done comrade, I just saw you posts :+1:

1 Like
9

Why don’t you try

import bootstrap/js/bootstrap.js

it is the bundled version, in which all libraries are included

I used in one of my repositories both tooltip and dropdown of bootstrap v4-beta.3 and it just works fine in all browsers. It’s loader is fusebox and using another skeleton though.

10

I encountered this issue, its caused by the duplication of jQuery across both the app and vendor bundles.

I created this issue for it here: