Laravel Vite get Uncaught ReferenceError: $ is not defined when import custom js file

Question

I use Laravel with Vite, and import my custom js file in app.js like this.

import jQuery from "jquery";
Object.assign(window, {$: jQuery, jQuery})
window.jQuery = window.$ = $

import "./custom.js"

in my custom.js file, only this content.

$('body').html("jquery work!")

But get error app.9618bc24.js:104 Uncaught ReferenceError: $ is not defined

If I comment the import "./custom.js" line. I still can use $('body').html("jquery work!") in blade. That mean Jquery is loaded, right? But why it not work in custom.js file?

I know I can use jquery in app.js, but I have too many script, I must split the code to custom.js. Help me, please.

Answer 1

When you import "./custom.js" separately, it's in a different module scope, and it doesn't automatically recognize the global $ variable defined in app.js.

Try the following...

custom.js

import $ from "jquery";

$('body').html("jquery work!");