Why do I keep getting $(…).scrollSpy is undefined?

Question

I am using bootstrap 4.3.1 popper 1.10.1 and jquery 3.4.1

loaded in the order of popper jquery bootstrap

But using data-spy="scroll" in combination with a target doesnt work, and calling the scrollSpy function myself produces the error: TypeError: $(...).scrollSpy is not a function

I tried using that data attribute as well as using the manual function. I tried swapping out bootstrap and jquery functions, load errors, pasting the scrollSpy code from twitter bootstrap (which did nothing)

<div class="timeline" id="timeline-spy" data-spy="scroll" data-target="#timeline-wrapper">
            <nav class="timeline-nav__wrapper" id="timeline-wrapper">
                <ul class="timeline-nav">
                  ... (list items)
                </ul>
            </nav>
</div>

I expect scrollspy to work the way it is described and not throw the TypeError: $(...).scrollSpy is not a function error, or just for the data-attribute method to work.

Edit

All the libraries i load: (It's symfony code but you should be able to tell)

{{ encore_entry_link_tags('app') }}
<link rel="stylesheet" href="{{ asset('/css/selectize.min.css') }}">
<link rel="stylesheet" href="{{ asset('/css/custom.css') }}">
<link rel="stylesheet" href="{{ asset('/css/rpg-icons/css/rpg-awesome.min.css') }}">

<script src="{{ asset('/js/popper.min.js') }}"></script>
<script src="{{ asset('/js/jquery.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/perfect-scrollbar.js') }}"></script>
<script src="{{ asset('/js/selectize.min.js') }}"></script>
<script src="{{ asset('/js/clamp.min.js') }}"></script>
<script src="{{ asset('/theme/light/sb-admin-2.min.js') }}"></script>
{{ encore_entry_script_tags('app') }}
<script src="{{ asset('/js/toast.min.js') }}"></script>
<script src="{{ asset('/build/ckeditor/ckeditor.js') }}"></script>
<script src="{{ asset('js/vue.min.js') }}"></script>

Note: They are all in the of the html file because i'm using turbolinks.

In the picture below you can see that none of the jquery gets overwritten and that the load order is quite correct. The app.js consists of a small amount of js, so it's not reloading jquery there or anything like that.

Answer 1

Bootstrap has two dependencies: jQuery 1.9.1 and popper.js 1.12.3. When you install Bootstrap, you need to install these two dependencies.

In Angular:

Install popper.js npm install popper.js@^1.12.3 --save

Install jQuery: npm install jquery@1.9.1 --save

Install Bootstrap: npm install bootstrap@4.0.0-beta.2 --save

If you're using latest version of bootstrap(4.1+) then

For Bootstrap 4.1

npm install popper.js@^1.14.3 --save

npm install jquery@3.3.1 --save

npm install bootstrap@4.1.1 --save

then just add the package to the scripts in angular.json - the same way you include other js files, but Popper.min.js should be before Bootstrap.min.js

In HTML:

include popper.js before Bootstrap js file and the Scrollspy should work just fine. CDN Link: https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js .

Answer 2

The $(...).scrollSpy() never resolved it self. However, when playing around with some codepens i figured out how to fix the data related one. For me, what fixed it was adding the class 'nav' to the tag. So it functions properly now.