"default" is not exported by "node_modules/select2/dist/js/select2.js" when building with laravel 9 and vite

Question

I have a Laravel 9 app. I am trying to get select2 to work however, when I do npm run build I get the error:

RollupError: "default" is not exported by "node_modules/select2/dist/js/select2.js", imported by "resources/js/app.js".

I installed select2 using the following:

npm install select2 --save-dev

Then I added the following lines in my app.js file after the jquery import:

import select2 from "select2"

select2()

Everything seems to be fine in dev mode. However, as soon as I try to build it, I get the error mentioned above. Does anyone know how to fix this?

Answer 1

As I know, select2 is a jQuery plugin and does not use ES6 modules. If no ES6 means No support for export default

---

To use this,

Import it with a jQuery structure.

npm install jquery --save

In code

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

import 'select2'; // Modifies the global jQuery object.

$('select').select2();

can try this too How can I using select2 with webpack?

If you have CSS, you can add in main CSS or SASS(ex: app.scss)

@import "~select2/dist/css/select2.min.css";

Finally, run

npm run build

---

In case you need CDN Using Select2 from a CDN