Hey all I'm trying to use Bootstrap Multiselect via an NPM install but getting an $(...).multiSelect is not a function error. I read the docs but based on my current internal company setup I CAN NOT use the CDN to use the library. Once I NPM installed with npm i bootstrap-multiselect``` I then had an error for knockout so I npm i knockout```.
So far so good, the errors go away YAY... Well now I'm trying to use the library and can't seem to get it to work, only seeing the error above and when I try to require('bootstrap-multiselect'); my entire site locks down with Cannot read property 'fn' of undefined.
I've tried to do some VERY hacky work around to pull in the CDN but honestly not sure its working but will include below.
Injected Headers (may or may not be working):
<!-- Pull in JQuery -->
<script
src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"
></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.6.3/css/buttons.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/colreorder/1.5.2/css/colReorder.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedcolumns/3.3.1/css/fixedColumns.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.5/css/responsive.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/2.0.2/css/scroller.bootstrap4.min.css"/>
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.7/css/fixedHeader.bootstrap4.css"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<!-- Pull in Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed:wght@400;500&display=swap" rel="stylesheet">
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.6.3/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/colreorder/1.5.2/js/dataTables.colReorder.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/3.3.1/js/dataTables.fixedColumns.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.5/js/responsive.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/scroller/2.0.2/js/dataTables.scroller.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedheader/3.1.7/js/dataTables.fixedHeader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>
Component:
const $ = require('jquery');
// require('datatables.net-bs4');
require('yadcf');
require('datatables.net-bs4');
require('datatables.net-buttons-bs4');
require('datatables.net-buttons/js/buttons.colVis.js');
require('datatables.net-buttons/js/buttons.html5.js');
require('datatables.net-colreorder-bs4');
require('datatables.net-fixedcolumns-bs4');
require('datatables.net-fixedheader-bs4');
require('datatables.net-responsive-bs4');
require('datatables.net-buttons/js/buttons.print.js');
require('select2');
require('bootstrap-multiselect');
export const SpecialistTodayOverview = (props) => {
const dispatch = useDispatch();
const user = useSelector((state) => state.currentUser);
const view = useSelector((state) => state.View);
const repOverview = useSelector((state) => state.SPOverview).SPRepOverview;
const populationOverview = useSelector((state) => state.SPOverview).SPPopulationOverview;
const repPopulationOverview = useSelector((state) => state.SPOverview).SPRepPopulationOverview;
// initial page landing pulls data needed
$(document).ready(function() {
$('select.sorting-dropdown').multiSelect();
});
//Some ommited here
return (
<div>
<div id="spinner" style={{ display: 'block' }}>
<LoadingSpinner />
</div>
{repOverview.length || populationOverview.length || repPopulationOverview.length ? (
<div>
<div className="main-header">Specialist Leads Overview</div>
<div className="table-header">Rep Overview</div>
<table
id="rep-overview"
className="table table-striped table-bordered row-border"
cellSpacing="0"
width="100%"
/>
<div className="table-header">Population Overview</div>
<table
id="population-overview"
className="table table-striped table-bordered row-border"
cellSpacing="0"
width="100%"
/>
<div className="table-header">Rep Population Overview</div>
<table
id="rep-population-overview"
className="table table-striped table-bordered row-border"
cellSpacing="0"
width="100%"
/>
</div>
) : (
<LoadingSpinner />
)}
</div>
);```
Any help it super appreciated!
Check the network tab in the inspector to find out which files aren't loaded first. Or maybe you should try to load jquery first since it's needed by other modules.