Getting J Query and Other Dependencies into Minimal Installation of 9.52

I have a brand new installation of a 1-page website I built for testing purposes. It is built in Laravel 9.52.20. I use Herd for my testing/development. The domain is https://playground.test.  This is the welcome.blade.php page . I have added the Select2 dependency if Select 2 for testing purposes also.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select2 Test</title>

</head>
<body>
<h1>Select2 Test in Safari</h1>

<select class="select2" id="testSelect2" name="state">
    <option value="AL">Alabama</option>
    <option value="WY">Wyoming</option>
</select>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        console.log("✅ jQuery Loaded: ", typeof $);
        console.log("✅ Checking Select2: ", typeof $.fn.select2);

        if (typeof $.fn.select2 !== "undefined") {
            console.log("✅ Select2 is loaded!");
            $('.select2').select2(); // Corrected selector
        } else {
            console.error("❌ Select2 is NOT loaded!");
        }
    });
</script>

</body>
</html> ```

This is the web routes page: ```
<?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('select2test');
});

This is my .env file: ``` APP_NAME=Playground APP_ENV=local APP_KEY=base64:yf/DLmoxciof8Fy9uDoaZDPC5u15KqxFvTd8xkiwcr0= APP_DEBUG=true APP_URL=https://playground.test

LOG_CHANNEL=stack LOG_DEPRECATIONS_CHANNEL=null LOG_LEVEL=debug

DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=laravel DB_USERNAME=root DB_PASSWORD=

BROADCAST_DRIVER=log CACHE_DRIVER=file FILESYSTEM_DISK=local QUEUE_CONNECTION=sync SESSION_DRIVER=file SESSION_LIFETIME=120

MEMCACHED_HOST=127.0.0.1

REDIS_HOST=127.0.0.1 REDIS_PASSWORD=null REDIS_PORT=6379

MAIL_MAILER=smtp MAIL_HOST=mailpit MAIL_PORT=1025 MAIL_USERNAME=null MAIL_PASSWORD=null MAIL_ENCRYPTION=null MAIL_FROM_ADDRESS="[email protected]" MAIL_FROM_NAME="${APP_NAME}"

AWS_ACCESS_KEY_ID= AWS_SECRET_ACCESS_KEY= AWS_DEFAULT_REGION=us-east-1 AWS_BUCKET= AWS_USE_PATH_STYLE_ENDPOINT=false

PUSHER_APP_ID= PUSHER_APP_KEY= PUSHER_APP_SECRET= PUSHER_HOST= PUSHER_PORT=443 PUSHER_SCHEME=https PUSHER_APP_CLUSTER=mt1

VITE_PUSHER_APP_KEY="${PUSHER_APP_KEY}" VITE_PUSHER_HOST="${PUSHER_HOST}" VITE_PUSHER_PORT="${PUSHER_PORT}" VITE_PUSHER_SCHEME="${PUSHER_SCHEME}" VITE_PUSHER_APP_CLUSTER="${PUSHER_APP_CLUSTER}" ``` This is my app.js file:

import $ from 'jquery'; //Must load first
import Popper from 'popper.js';
import 'bootstrap';

window.$ = window.jQuery = $;
window.Popper = Popper;

This is my app.css file: ``` @import 'select2/dist/css/select2.css';

This is my bootsrap.js file: ```
import _ from 'lodash';
window._ = _;

import axios from 'axios';
window.axios = axios;

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
``` This is my package.json file:

{ "private": true, "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "axios": "^1.1.2", "laravel-vite-plugin": "^0.7.2", "lodash": "^4.17.19", "postcss": "^8.1.14", "vite": "^4.0.0" }, "dependencies": { "bootstrap": "^4.6.2", "jquery": "^3.7.1", "popper.js": "^1.16.1", "select2": "^4.1.0-rc.0" } }

I have several issues trying to get things running.  

1.   I cannot get jquery to work on the home page
.  2.  I cannot get Select2 to work on the home page.  

What could be wrong?

LaryAI

1 year ago

Level 58

To resolve the issues with jQuery and Select2 not working on your Laravel 9.52.20 setup, you need to ensure that these libraries are properly included and initialized in your project. Here's a step-by-step guide to help you get them working:

Step 1: Ensure Dependencies are Installed

First, make sure that jQuery and Select2 are installed via npm. Your package.json already lists them as dependencies, so run the following command to install them:

npm install

Step 2: Configure Vite

Since you're using Vite for asset bundling, ensure that your vite.config.js is set up to handle your JavaScript and CSS files. Here's a basic example:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

Step 3: Update `app.js`

Ensure that your resources/js/app.js file imports jQuery and Select2 correctly:

import $ from 'jquery';
import 'select2';

window.$ = window.jQuery = $;

$(document).ready(function() {
    console.log("✅ jQuery Loaded: ", typeof $);
    console.log("✅ Checking Select2: ", typeof $.fn.select2);

    if (typeof $.fn.select2 !== "undefined") {
        console.log("✅ Select2 is loaded!");
        $('.select2').select2();
    } else {
        console.error("❌ Select2 is NOT loaded!");
    }
});

Step 4: Update `app.css`

Ensure that your resources/css/app.css imports the Select2 CSS:

@import 'select2/dist/css/select2.css';

Step 5: Compile Assets

After making these changes, compile your assets using Vite:

npm run dev

Step 6: Include Compiled Assets in Blade Template

Ensure that your welcome.blade.php (or select2test.blade.php as per your route) includes the compiled assets. Update your Blade template to include the Vite directives:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Select2 Test</title>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body>
    <h1>Select2 Test in Safari</h1>

    <select class="select2" id="testSelect2" name="state">
        <option value="AL">Alabama</option>
        <option value="WY">Wyoming</option>
    </select>
</body>
</html>

Step 7: Verify

After following these steps, visit your site at https://playground.test and check the console for any errors. You should see logs confirming that jQuery and Select2 are loaded, and the Select2 dropdown should be styled and functional.

If you encounter any issues, double-check the console for errors and ensure that all paths and configurations are correct.

Please or to participate in this conversation.