Bootstrap: Uncaught TypeError: Cannot read property 'fn' of undefined at setTransitionEndSupport (bootstrap.js:122)

[mikiol60]

Trying to work with Bootstrap 4 and Angular 6. I got "Uncaught TypeError: Cannot read property 'fn' of undefined at setTransitionEndSupport (bootstrap.js:122)". I have been using bootstrap for a while and this is the first time I saw such an error. This is my first integrating Angular 6 and Bootstrap 4
"bootstrap": "^4.1.1",
"jquery": "^3.3.1",

[Johann-S]

Bug reports must include a live demo of the problem. Per our contributing guidelines, please create a reduced test case via CodePen or JS Bin and report back with your link, Bootstrap version, and specific browser and OS details.

[flashover]

Hi @mikiol60 ,

I just had a similar issue in my project and found below ticket:
https://github.com/understrap/understrap/issues/449

(Note: I wasn't using Understrap at all here)

There someone suggested to double check your HTML and see if the *.js files are loaded in the correct order:
https://github.com/understrap/understrap/issues/449#issuecomment-376139160

jQuery must come first, then Popper.js, and then our JavaScript plugins.

My order was:
{bootstrap, popper, jquery}

Changed that to:
{jquery, popper, bootstrap}

And my issue is solved, hope it helps for you too.

Cheers,

[mdo]

Judging by the reactions to these two comments (thumbs down on @Johann-S's comment that clearly reiterate our issue templates, thumbs up on @flashover's suggestion), your issue is resolved. Closing out.

[lm28]

I am trying to work through a tutorial so at this stage, I do not have enough knowledge to comply with the 'contributing guidelines' as suggested by Johann-s (so -1 for thinking that we are all in your league).

What i CAN tell you is that this issue occurred AFTER I upgrade my version of Bootstrap (which now suddenly NEEDS 'popper'?)
I can also tell you that when I right-click on the web page and inspect/sources, one of the 'problem' links is http://localhost:58746/bundles/bootstrap?v=iTdcQLdhilorfQsoxwYdUx39Ev8f-pgcBu51zsXdT2o1 (whatever that means?)
and when I click on the above link, it seems to be taking me to code in either Bootstrap.js or Popper.js. The browser is reporting that the error occurs in the following section. The cursor is flashing on the full stop between "n.fn"

but expected type "'+e+'".');}}};return n.fn.emulateTransitionEnd=r,n.event.sp

Not sure of this is of any assistance? I eagerly await a fix/update to the offending code so that I can continue with the tutorial.

[ningacoding]

Cannot read property 'fn' of undefined
ussing latest bootstrap version + Angular + Electron

[MatiasChao]

Me too =/

[mikiol60]

@ningacoding @MatiasChao Try reordering your imports of jquery, bootstrap and popper(correct order would be {jquery, popper, bootstrap} ). That should pretty much get the job done

[ningacoding]

@mikiol60 that works for Angular in Browser, that's ok, but with Electron, order doesn't care, error is the same.

[mosekk]

I use bootstrap within my java + thymeleaf project. Same problem:

util.js:56 Uncaught TypeError: Cannot read property 'fn' of undefined at util.js:56 at util.js:10 at bootstrap.min.js:6 at bootstrap.min.js:6

Bootstrap version: 4.1.3

[Johann-S]

We cannot help with a partial bug report, please create a new issue with a live example on StackBlitz or CodePen