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

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 😉

Issue Analytics

State:
Created 5 years ago
Reactions:5
Comments:16 (5 by maintainers)

Top GitHub Comments

7reactions

caseyjholcommented, Aug 24, 2018

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';

6reactions

prettycodecommented, Jun 7, 2018

@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.

Top Results From Across the Web

Simple bootstrap-select not working - Stack Overflow

Looks like you need to include Bootstrap's dropdown.js component, and Bootstrap's CSS. Only then you can use bootstrap-select .

Developers - "issue retrieving Bootstrap's version"

"issue retrieving Bootstrap's version" - even when Bootstrap loaded first. ... Ensure Bootstrap is being loaded before bootstrap-select and ...

10 Most Common Bootstrap Mistakes That Developers Make

Most of the important pitfalls are mentioned in the documentation, but still some Bootstrap mistakes are pretty subtle, or have ambiguous causes.

Introduction - Bootstrap

Get started with Bootstrap, the world's most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.

Getting started - Bootstrap

require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery ... problems with installing dependencies or running Grunt commands, first ...