CODEWITHSUNDEEP
jquerylaraveljquery-select2laravel-9
user13698713
user13698713

Reputation:

Select2 is not willing to work with Laravel 9 and Vite? Am I missing something?

I just fresh-installed a Laravel 9 app, added select2 and jquery with npm, passed what I needed to pass to vite.config.js and app.js, jquery is getting loaded way before select2 is loaded and yet still, select2 throws

Uncaught ReferenceError: jQuery is not defined
    at select2.min.js:2:241
    at select2.min.js:2:249

I even made a div#test and used jquery to put "ok" inside it when the window is loaded, it changes to "ok", but then why is select2 complaining?

package.json


    "dependencies": {
        "jquery": "^3.6.1",
        "select2": "^4.1.0-rc.0"
    }

vite.config.json

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            '$': 'jQuery',
        },
    },
});

app.js

import "./bootstrap";
import $ from "jquery";
window.$ = $;
// import { Select2 } from "select2"; // does nothing when uncommented
import 'select2'; // does nothing

$("#test").html("ok");

$(document).on("load",function() { // does nothing
    $(".js-example-basic-single").select2();
});

index.blade.php

just partial paste
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body>

    <div id="test"></div> <--- this will have "ok" in it since jquery is loaded

    <select class="js-example-basic-single"> <--- this displays as a regular select instead of select2
        <option value="x">asd</option>
        <option value="x">asd</option>
        <option value="x">asd</option>
        <option value="x">asd</option>
    </select>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js" defer></script> <------ if I have this "jquery is not defined" will be thrown
partial paste end

If I remove the CDN script from the end, it won't throw the error anymore but still won't work. Also CDN is only used while I test if it works or not, I'll need it locally anyway...

I literally tried everything I could, I've been struggling with it for 4 days and can't figure out what's wrong with this.

Upvotes: 5

Views: 10897

Answers (2)

Jeremy Belolo
Jeremy Belolo

Reputation: 4541

After installing Select2 (and Jquery of course) with npm npm install select2 --save-dev, I had to initialize it.

import $ from 'jquery';
import select2 from 'select2';
select2($);

After that, you can use it like you usually do, $(#mySelect).select2();

Also, in your other <script> tags, don't forget to add type='module', otherwise they get loaded before Vite loads your app.js and Jquery's $ is not yet defined.

Upvotes: 3

Roel Jansen
Roel Jansen

Reputation: 376

After you install Select2 using: npm install select2 --save-dev, you need to add these 2 lines to bootstrap.js, after the jQuery import lines:

import select2 from 'select2';
select2();

Also add the Select2 CSS to app.scss:

@import "/node_modules/select2/dist/css/select2.css";

Alternatively you can add the Select2 CSS to app.js

import "/node_modules/select2/dist/css/select2.css";

In your JavaScript you can use it like you used to:

$(".js-example-basic-single").select2();

Upvotes: 26

Related Questions