Can't Get Vite To Load My JS files

I'm moving to Vite from MIx. Vite appears to be working as it recognises changes in my JS code and reports errors if a file does not exist.

However, I can not get my Blade views to function with my own JS scripts. Other portions of the page which rely on JQuery are working.

Furthermore, when I run a test to see if JQuery is working I get a positive result.

<script>
window.onload = function() {
if (window.jQuery) {
// jQuery is loaded
alert("Yeah!");
} else {
// jQuery is not loaded
alert("Doesn't Work");
}
}
</script>

Chrome Dev Tools confirms that my JS files are loaded with a a status of 200.

Here is my set up

Master Layout File Header

@vite(['resources/css/app.css', 'resources/js/bootstrap.js']).    // This is Laravel Bootstrap

Vite Config

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

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

Laravel Bootstrap

import _ from 'lodash';
window._ = _;

import 'bootstrap/dist/js/bootstrap.js';
import  'bootstrap/js/dist/popover.js';
import './quotations.js'
import './functions.js'
import './hashtable.js'

Many Thanks!!

tykus

2 years ago

Level 104

Where is jQuery get added to the window object; we would expect to see something like the lodash syntax above, but for jQuery (assuming you have npm installed it npm install jquery --save-dev)

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

vincej

2 years ago

Level 15

@tykus I could not get JQuery to load from the node_modules, and so I just loaded it into my master layout file through a CDN . Is this where things are going wrong?

I edited my question and added that I can see my JS files in Chrome dev tools with a status of 20. BTW - the Larry AI was useless!

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

vincej

2 years ago

Level 15

@tykus To answer your specific question I have this inside Laravel Bootstrap.js

import _ from 'lodash';
window._ = _;

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

import 'bootstrap/dist/js/bootstrap.js';
import 'bootstrap/js/dist/popover.js';
import  './quotations.js';
import './functions.js';
import './hashtable.js';

``

mrbegginerak

2 years ago

Level 1

npm install jquery

import 'jquery'; //inside bootstrap.js

optional if not installed npm install laravel-vite-plugin

vincej

2 years ago

Level 15

Thank you all for your suggestions. I found a solution: I went back to Mix. Everything is working nicely again.

4 likes

Please or to participate in this conversation.