How to use jQuery UI with vite in laravel 9

Question

I am learning vite and struck with including jquery-ui into the project.

libs.ts

import * as jQuery from 'jquery';
declare global {
    interface Window {
        jQuery: typeof jQuery;
        $: typeof jQuery;
    }
}


window.$ = window.jQuery = jQuery;
require('jquery-ui-dist');

main.ts

jQuery(function(){
  console.log("i am called")  // getting console output
  jQuery(".datepicker").datepicker(); // getting error in editor  Property 'datepicker' does not exist on type 'JQuery<HTMLElement>'
});

console output

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import { esbuildCommonjs } from '@originjs/vite-plugin-commonjs'

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/scss/libs.scss',
                'resources/scss/main.scss',
                'resources/css/app.css',
                'resources/js/libs.ts',
                'resources/js/main.ts',
            ],
            refresh: true,
        }),
    ],
    optimizeDeps:{
        esbuildOptions:{
          plugins:[
            esbuildCommonjs(['jquery','jquery-ui-dist/jquery-ui'])
          ]
        }
      }
});

package.json

    "devDependencies": {
        "@originjs/vite-plugin-commonjs": "^1.0.3",
        "@tailwindcss/aspect-ratio": "^0.4.0",
        "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/line-clamp": "^0.4.0",
        "@tailwindcss/typography": "^0.5.4",
        "axios": "^0.25",
        "laravel-vite-plugin": "^0.4.0",
        "lodash": "^4.17.21",
        "postcss": "^8.1.14",
        "tailwindcss": "^3.1.6",
        "vite": "^2.9.11"
    },
    "dependencies": {
        "autoprefixer": "^10.4.7",
        "jquery": "^3.6.0",
        "jquery-ui": "^1.13.2",
        "jquery-ui-dist": "^1.13.1",
        "moment": "^2.29.4",
        "sass": "^1.53.0"
    }

madbob · Accepted Answer · 2023-04-03 13:44:23Z

12

It is a bit tricky and counterintuitive, but:

in your bootstrap.js file, import jQuery and manually define a global alias

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

in your app.js, import bootstrap.js and then directly the dist file for jQuery-UI

import './bootstrap.js';
import 'jquery-ui/dist/jquery-ui';

It is important to leave jQuery initialization in boostrap.js (or whatever other file imported from the main one before actually importing jQuery-UI), so to enforce entire resolution of jQuery import and global alias definition. Keeping all together in the same file (import jQuery, define the alias, import jQuery-UI) is resolved in a different order, and break things: all imports are managed before execution of other code (e.g. the alias definition), so when it is the turn for jQuery-UI initialization it cannot find the global $ object.

This solution has been inspired by this post (it actually works even withot an alias in Vite configuration).

answered Apr 3, 2023 at 13:44

madbob

6601 gold badge11 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user14967413 Over a year ago

You can also load CSS, see stackoverflow.com/a/38755491/14967413

Neo Feb 18 at 17:03

I didn't understand why but it works only if I do it by importing as a second file for the jQuery part.

betontalpfa Jun 22 at 10:01

import 'jquery-ui/dist/jquery-ui'; was necessary for me

Healyhatman · Accepted Answer · 2023-02-28 02:32:33Z

0

You need to include the typescript types for datetimepicker so TypeScript knows about it

npm i @types/jquery.ui.datetimepicker

answered Feb 28, 2023 at 2:32

Healyhatman

1,6801 gold badge16 silver badges27 bronze badges

2 Comments

Alaksandar Jesus Gene Over a year ago

Why should i include datetimepicker types, when jquery itself is not working

Healyhatman Over a year ago

Well once you get jQuery working you'll end up with typescript errors because it doesn't understand datepicker. As to getting jquery UI working, your issue in the vitejs git repo looks like it has more useful answers

Collectives™ on Stack Overflow

How to use jQuery UI with vite in laravel 9

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related