'bootstrap multiselect throws error "n is undefined"

I am trying to configure bootstrap multiselect in my application. I did get it through npm i bootstrap-multiselect, followed by adding the module knockout because apparently it was required as well. Currently my multiselect crashes and says the following:

Uncaught TypeError: n is undefined, bootstrap-multiselect.js:1725

The boostrap-multiselect.js file line no. 1725 consits of this:

$.fn.multiselect = function (option, parameter, extraOptions) {
    return this.each(function () {
      var data = $(this).data('multiselect');
      var options = _typeof(option) === 'object' && option; // Initialize the multiselect.

      if (!data) {
        data = new Multiselect(this, options);
        $(this).data('multiselect', data);
      } // Call multiselect method.

I have no clue about where to start on this. This is how my application.js file looks:

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
import '../stylesheets/application'
import "@fortawesome/fontawesome-free/js/all"

require("stylesheets/application")
require('datatables.net-bs4')
require('datatables.net-fixedcolumns-bs4')
require('knockout')
require('bootstrap-multiselect')
import $ from 'jquery';

package.json file:

"bootstrap": "4.3.1",
"bootstrap-multiselect": "^1.1.0",
"chart.js": "^3.7.0",
"chartkick": "^4.1.1",
"cocoon": "github:nathanvda/cocoon#c24ba53",
"datatables.net-bs4": "^1.11.5",
"datatables.net-fixedcolumns-bs4": "^4.0.2",
"jquery": "^3.6.0",
"knockout": "^3.5.1",

How should I get my multiselect working in this case?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source