Bootstrap-select: "issue retrieving Bootstrap's version" - even when Bootstrap loaded first

[noamyg]

Using with Angular 5, I'm getting the following error:

bootstrap-select.min.js:7 There was an issue retrieving Bootstrap's version. Ensure Bootstrap is being loaded before bootstrap-select and there is no namespace collision. TypeError: Cannot read property 'Constructor' of undefined
    at bootstrap-select.min.js:7
    at bootstrap-select.min.js:8
    at bootstrap-select.min.js:7
    at bootstrap-select.min.js:7

I'm loading bootstrap first, here's the relevant part of my angular.json:

            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/bootstrap-select/dist/js/bootstrap-select.min.js",
              "src/assets/Scripts/classList.min.js"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "node_modules/bootstrap-select/dist/css/bootstrap-select.min.css"
            ],

package.json:

"dependencies": { "@angular/animations": "^5.0.0", "@angular/common": "^5.0.0", "@angular/compiler": "^5.0.0", "@angular/core": "^5.0.0", "@angular/forms": "^5.0.0", "@angular/http": "^5.0.0", "@angular/platform-browser": "^5.0.0", "@angular/platform-browser-dynamic": "^5.0.0", "@angular/platform-server": "^5.0.0", "@angular/router": "^5.0.0", "@types/sprintf": "^0.1.0", "@types/sprintf-js": "^1.1.0", "bootstrap": "4.0.0-beta.2", "bootstrap-select": "^1.13.1", "core-js": "^2.4.1", "file-saver": "^1.3.3", "font-awesome": "^4.7.0", "intl": "^1.2.5", "jquery": "^3.2.1", "mydatepicker": "^2.6.3", "popper.js": "^1.14.3", "rxjs": "^5.5.2", "sprintf-js": "^1.1.1", "zone.js": "^0.8.14" },

Would appreciate an assistance ;-)

[prettycode]

Same problem. Any luck finding a solution? We're loading "bootstrap": "3.3.7" dependency, but different version, before bootstrap-select, like you.

[caseyjhol]

It looks like you're using a beta version of Bootstrap 4. Do you still get the error with a stable release?

[gggustavo]

the problem is here:
version.full = ($.fn.dropdown.Constructor.VERSION || '').split(' ')[0].split('.');
release "bootstrap-select": "1.13.1".

[caseyjhol]

Any way anybody can link me to a live example so I can get a better look at what's happening?

[caseyjhol]

Are you loading any of the files with the async attribute? The only way I can consistently recreate this issue locally is by adding the async attribute when loading Bootstrap JS.

[caseyjhol]

I'm not 100% sure what the source of your issue is (obviously I'd like to get to the bottom of it). In any case, I'll be adding a new option in the next release - BootstrapVersion - that will allow you to specify the version as a workaround for any detection issues. Here is a snippet documenting it:

---

Because there are some changes in class names and layout between Bootstrap 3 and Bootstrap 4, bootstrap-select needs to know the version of Bootstrap you are using. By default, bootstrap-select automatically detects the version of Bootstrap. However, there are some instances where the version detection does not work properly (e.g. Bootstrap is being loaded asynchronously or there is a namespace collision). For now, bootstrap-select defaults to using Bootstrap 3 formatting if version detection fails. This will be changed in the next major release.

You can manually specify Bootstrap's version via bootstrap-select's Constructor.BootstrapVersion object:

$.fn.selectpicker.Constructor.BootstrapVersion = '4';

[h27-webdev]

I am using this library along with react and it gives the same issue did any of you guys found the solution

[prettycode]

@H27-VEN I was able to solve this by referencing the source .js file directly instead of requiring the package by name, as shown below:

require('bootstrap-select/js/bootstrap-select.js');

If I tried referencing the dist .js file directly, as show below, I had the same error as requesting the package by name:

require('bootstrap-select/dist/js/bootstrap-select.js);

The only difference between these two files, in my version of package, is that the source file does not do the module exporting functionality.

[caseyjhol]

Support for BootstrapVersion has been released in v1.13.2! See https://developer.snapappointments.com/bootstrap-select/options/#bootstrap-version for more info.

[mbsaberi]

Please check my similar question at StackOverflow based on Bootstrap v3.3.7

[AliN11]

Just placed jquery.js before bootstrap.js and got fixed.

[jurid0]

I had the same issue in my angular app, but only when using it via 'selectpicker' class, after change to js everything works fine.

[Skillnter]

Just placed jquery.js before bootstrap.js and got fixed.

Does not work even after putting it after jquery file. I put this file in the end of the scripts list. It still does not work.