Have you tried to import like this ?
import { VirtualSelect } from 'virtual-select-plugin/dist/virtual-select.min.js'
I mean { VirtualSelect } instead of just VirtualSelect.
Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
On laravel 11 site I try to use virtual-select installed with npm
after npm install I tried do it in usual way with valid path of files in app.js:
import VirtualSelect from 'virtual-select-plugin/dist/virtual-select.min.js'
import 'virtual-select-plugin/dist/virtual-select.min.css'
But when I try to use VirtualSelect in my blade file :
VirtualSelect.init({
ele: '#userPermissionSelection',
multiple: true,
showValueAsTags: true,
tooltipFontSize: 16,
options: @json($userPermissionsSelectionItems),
selectedValue: @json($selectedFilterUserPermissions),
allowNewOption: true,
additionalClasses: ''
});
I got error :
app.js:12 Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/virtual-select-plugin_dist_virtual-select__min__js.js?v=e4b4e9f8' does not provide an export named 'default' (at app.js:12:9)
Also I tried to use way as I read here :
https://sa-si-dev.github.io/virtual-select/#/?id=get-started
and in my blade file wrote :
<link rel="stylesheet" href="/node_modules/virtual-select-plugin/dist/virtual-select.min.css">
<script src="/node_modules/virtual-select-plugin/dist/virtual-select.min.js"></script>
<!-- optional -->
<link rel="stylesheet" href="/node_modules/tooltip-plugin/dist/tooltip.min.css">
<script src="/node_modules/tooltip-plugin/dist/tooltip.min.js"></script>
But another errors :
GET http://127.0.0.1:8000/node_modules/virtual-select-plugin/dist/virtual-select.min.css net::ERR_ABORTED 404 (Not Found)
staff-users:34
GET http://127.0.0.1:8000/node_modules/tooltip-plugin/dist/tooltip.min.css net::ERR_ABORTED 404 (Not Found)
staff-users:31
GET http://127.0.0.1:8000/node_modules/virtual-select-plugin/dist/virtual-select.min.js 404 (Not Found)
staff-users:35
GET http://127.0.0.1:8000/node_modules/tooltip-plugin/dist/tooltip.min.js
That is some strange way to show link to node_modules dir... Which way is correct ?
"sweetalert2": "^11.12.1",
"virtual-select-plugin": "^1.0.44"
"laravel/framework": "^10.48.12",
"livewire/livewire": "^3.5.0",
Thanks in advance!
Please or to participate in this conversation.