laravel 9, bootstrap 5, webpack problem, can't use bootstrap-select Error: Uncaught TypeError: $(...).selectpicker is not a function

Question

I am using laravel 9 and I try to use bootstrap-select but I have the following Error: Uncaught TypeError: $(...).selectpicker is not a function

This is my bootstap.js file:

window._ = require('lodash');

try {   
window.$ = window.jQuery = require('jquery');
//window.$ = require('jquery');

window.Popper = require('@popperjs/core').default;
       
require('bootstrap');

window.datepicker = require('bootstrap-datepicker');
    
window.selectpicker = require('bootstrap-select');
//require('bootstrap-datepicker');

//datatables with bootstarp5
require( 'jszip' );
require( 'pdfmake' );
require( 'datatables.net-bs5' )();
require( 'datatables.net-autofill-bs5' )();
require( 'datatables.net-buttons-bs5' )();
require( 'datatables.net-buttons/js/buttons.colVis.js' )();
require( 'datatables.net-buttons/js/buttons.html5.js' )();
require( 'datatables.net-buttons/js/buttons.print.js' )();
require( 'datatables.net-colreorder-bs5' )();
require( 'datatables.net-datetime' )();
require( 'datatables.net-fixedcolumns-bs5' )();
require( 'datatables.net-fixedheader-bs5' )();
require( 'datatables.net-keytable-bs5' )();
require( 'datatables.net-responsive-bs5' )();
require( 'datatables.net-rowgroup-bs5' )();
require( 'datatables.net-rowreorder-bs5' )();
require( 'datatables.net-scroller-bs5' )();
require( 'datatables.net-searchbuilder-bs5' )();
require( 'datatables.net-searchpanes-bs5' )();
require( 'datatables.net-select-bs5' )();
require( 'datatables.net-staterestore-bs5' )();
} catch (e) {}


/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

 

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo';

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: process.env.MIX_PUSHER_APP_KEY,
//     cluster: process.env.MIX_PUSHER_APP_CLUSTER,
//     forceTLS: true
// });

and this is app.scss file:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Bootstrap-select
//@import "~bootstrap-select/sass/bootstrap-select.scss";
@import "~bootstrap-select/sass/bootstrap-select";

// Datepicker
@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css";

@import "~datatables.net-bs5/css/dataTables.bootstrap5.min.css";
@import "~datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css";
@import "~datatables.net-colreorder-bs5/css/colReorder.bootstrap5.min.css";
@import "~datatables.net-fixedcolumns-bs5/css/fixedColumns.bootstrap5.min.css";
@import "~datatables.net-fixedheader-bs5/css/fixedHeader.bootstrap5.min.css";
@import "~datatables.net-keytable-bs5/css/keyTable.bootstrap5.min.css";
@import "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css";
@import "~datatables.net-rowgroup-bs5/css/rowGroup.bootstrap5.min.css";
@import "~datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css";
@import "~datatables.net-scroller-bs5/css/scroller.bootstrap5.min.css";
@import "~datatables.net-searchbuilder-bs5/css/searchBuilder.bootstrap5.min.css";
@import "~datatables.net-searchpanes-bs5/css/searchPanes.bootstrap5.min.css";
@import "~datatables.net-select-bs5/css/select.bootstrap5.min.css";
@import "~datatables.net-staterestore-bs5/css/stateRestore.bootstrap5.min.css";

I tried all possible combinations, changed the order of loading libraries in bootstrap.js and had no luck.

Here are the libraries that I am using:

Any idea how to solve this?

npm list
site1@ /var/www/site1
├── @popperjs/core@2.11.2
├── axios@0.25.0
├── bootstrap-datepicker@1.9.0
├── bootstrap-select@1.14.0-beta2
├── bootstrap@5.1.3
├── datatables.net-autofill-bs5@2.3.9
├── datatables.net-bs5@1.11.5
├── datatables.net-buttons-bs5@2.2.2
├── datatables.net-colreorder-bs5@1.5.5
├── datatables.net-datetime@1.1.2
├── datatables.net-fixedcolumns-bs5@4.0.2
├── datatables.net-fixedheader-bs5@3.2.2
├── datatables.net-keytable-bs5@2.6.4
├── datatables.net-responsive-bs5@2.2.9
├── datatables.net-responsive@2.2.9
├── datatables.net-rowgroup-bs5@1.1.4
├── datatables.net-rowreorder-bs5@1.2.8
├── datatables.net-rowreorder@1.2.8
├── datatables.net-scroller-bs5@2.0.5
├── datatables.net-searchbuilder-bs5@1.3.2
├── datatables.net-searchpanes-bs5@2.0.0
├── datatables.net-select-bs5@1.3.4
├── datatables.net-staterestore-bs5@1.1.0
├── jquery@3.6.0
├── jqueryui@1.11.1
├── jszip@3.7.1
├── laravel-mix@6.0.43
├── lodash@4.17.21
├── pdfmake@0.2.4
├── postcss@8.4.8
├── resolve-url-loader@5.0.0
├── sass-loader@11.1.1
└── sass@1.49.9

I just used the example from documentation:

 <select name="test" id="test" class="selectpicker" >      
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
   </select> 


$(function() {
$('.selectpicker').selectpicker();
}

I tried also bootstrap-select@1.13.18, no error with this version but still select does not work, select is frozen showing only first value "Mustard".

I am stuck here.

Any ideas?