loquela's avatar

Jaravel 10 - jQuery and JQuery UI appear to be clashing

i there, I'm wanting to use jQuery and jQuery UI with my new Laravel 10 project. I'm able to successfully install and use jQuery with NPM and Vite, but when I install and try to include jQuery UI I am getting

Uncaught ReferenceError: jQuery is not defined

and

Uncaught ReferenceError: $ is not defined

Here is my app.js file:

import './bootstrap';
// Import jQuery and assign it to the window object
import $ from 'jquery';
window.$ = window.jQuery = $;

import 'jquery-ui/ui/widgets/datepicker.js';

With that final import line my jQuery doesn't work, if I remove it jQuery Core works fine.

Here's my vit.config.js file

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

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

Please Help!

Loquela

0 likes
7 replies
LaryAI's avatar
Level 58

Hello Loquela,

It seems like you're having an issue where jQuery UI is not recognizing the jQuery instance. This can happen if jQuery UI is imported before jQuery has been set up on the window object, or if there's a module resolution issue.

First, ensure that your app.js file is correctly setting up jQuery before importing any jQuery UI components. Your current setup looks correct, but let's try to enforce the order of execution by using dynamic imports:

import './bootstrap';

// Import jQuery and assign it to the window object
import $ from 'jquery';
window.$ = window.jQuery = $;

// Dynamically import jQuery UI components
import('jquery-ui/ui/widgets/datepicker.js').then(() => {
    // Your code that depends on jQuery UI can go here
    // For example, initializing a datepicker:
    $(function() {
        $("#datepicker").datepicker();
    });
});

Next, let's address your vite.config.js file. The alias you've set up seems to be incorrect. You're trying to alias the string '$' to 'jQuery', but what you actually want to do is alias the module identifier 'jquery' to the jQuery npm package. Here's how you can fix the alias:

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

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/sass/app.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
    resolve: {
        alias: {
            'jquery': 'jquery/src/jquery' // Correct alias for jQuery
        },
    },
});

By using the correct alias, you ensure that any import of 'jquery' within your modules will resolve to the jQuery source file, which should be compatible with jQuery UI.

Make sure to restart your Vite server after making these changes to ensure that the new configuration is picked up.

If you continue to experience issues, you may also want to check if there are any other scripts or modules in your project that could be interfering with jQuery or jQuery UI. Additionally, ensure that you don't have multiple versions of jQuery being imported, as this can also cause conflicts.

I hope this helps resolve your issue! If you have any further questions or run into more issues, feel free to ask.

1 like
loquela's avatar

Many thanks! I updated the files as suggested. Now I have a different error:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/jquery.js?v=4d9dc403' does not provide an export named 'default' (at app.js:4:8)

in addition to

Uncaught ReferenceError: $ is not defined
DhPandya's avatar

@loquela

  • First install jQuery: npm i jquery

  • Then import jQuery in your file as defined below

import jquery from 'jquery';

window.$ = window.jQuery = jquery; // attaching it with window object
loquela's avatar

? Sorry, that's what I've already done and get the errors when I include jQuery UI. However, I tried your version of the import just in case bit same issue.

Thanks anyway, L.

DhPandya's avatar

@loquela Make sure you are importing jQueryUI after importing jQuery. Did you started the dev server of the vite after applying the changes?

loquela's avatar

Mmmm...Please see my app.js file above.

Thanks

loquela's avatar
loquela
OP
Best Answer
Level 2

OK, I just gave up with Vite and just referenced the minified jQuery and jQuery UI directly. Job Done.

Please or to participate in this conversation.