I'm currently grappling with using Vite for front-end asset compilation in my Laravel project. The main issue I am having is when it comes to accessing JavaScript packages in Blade files (HTML).

In my attempt to set up Summernote, I've encountered challenges, including confusion about including the summernote-bs5.js file in the head section – it appears to be a configuration file, and the corresponding summernote-bs5.css is not where I expected it. My knowledge of JavaScript and its packages is limited, but the provided instructions seem unclear, and I'm unsure about the correct approach.

I've included the following Vite configuration in my HEAD section: @vite(['resources/css/app.css', 'resources/js/app.js']) which should load both the CSS and JavaScript as needed for people visiting the page in their browser.

Could anyone provide insights or solutions regarding how to effectively compile assets with Vite and access JavaScript packages like jQuery or Summernote in Laravel Blade files? For example one error I am seeing in the browser is: Uncaught TypeError: $(...).summernote is not a function

My Vite configuration file is:

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

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

The package JSON file (By the way, I want to get rid of tailwind and use bootstrap 5):

{
    "private": true,
    "type": "module",
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.5.2",
        "alpinejs": "^3.4.2",
        "autoprefixer": "^10.4.2",
        "axios": "^1.6.1",
        "laravel-vite-plugin": "^1.0.0",
        "postcss": "^8.4.31",
        "tailwindcss": "^3.1.0",
        "vite": "^5.0.0"
    }
}

Here are the default JavaScript files in the resources folder:

This is the contents of app.js:

import './bootstrap';

import Alpine from 'alpine.js';

window.Apline = Alpine;

Alpine.start();

The compiled app.js loading on the web page:

Here is some of the bootstrap.js which I never touched:

Thank you in advance for your expertise!