Question 182613 in Laravel Question posted in
The official Laravel Documentation can be found here.

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

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?

Tags:

2

Answers


  1. 0

    Try this
    import $ from 'jquery';
    import 'select2';

    // Optional: Import select2 CSS if needed import 'select2/dist/css/select2.min.css';
    // Initialize select2 $(document).ready(function() { $('select').select2() })
    than
    npm run dev

    Login or Signup to reply.
  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search