Bootstrap Dual Listboxを使おうとして詰まりかける

Bootstrap Dual Listboxを読もうとしてエラーになる。

window.jQuery = window.$ = require('jquery');
require('bootstrap');
require('bootstrap4-duallistbox/src/jquery.bootstrap-duallistbox');

古いバージョンだと大丈夫

window.jQuery = window.$ = require('jquery');
require('bootstrap');
require('bootstrap-duallistbox/src/jquery.bootstrap-duallistbox');

こうしたら動いた

window.jQuery = window.$ = require('jquery');
require('bootstrap');
require('bootstrap4-duallistbox/src/jquery.bootstrap-duallistbox')($);

htmlはこんな

<form id="demoform" action="#" method="post">
<select multiple="multiple" size="10" name="duallistbox_demo1[]" title="duallistbox_demo1[]">
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
<option value="option5">Option 5</option>
<option value="option6" selected="selected">Option 6</option>
<option value="option7">Option 7</option>
<option value="option8">Option 8</option>
<option value="option9">Option 9</option>
<option value="option0">Option 10</option>
</select>
<br>
<button type="submit" class="btn btn-default btn-block">Submit data</button>
</form>
<script>
var demo1 = $('select[name="duallistbox_demo1[]"]').bootstrapDualListbox();
$("#demoform").submit(function() {
alert($('[name="duallistbox_demo1[]"]').val());
return false;
});
</script>

わからない事がまだまだある。