How to use jQuery UI with vite in laravel 9

[alaksandarjesus]

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"
    }

[kwhat]

Something like this should work, but it doesn't.

import {$,jQuery} from 'jquery';
window.$ = $;
window.jQuery = jQuery;

import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/datepicker';

This should probably be a bug report so it can get fixed.

[liamkeily]

Are you thinking this is a bug with jQuery UI or Vite?

[EmperorArthur]

Are you thinking this is a bug with jQuery UI or Vite?

Depends on what the spec says about imports, but likely Vite.

The problem is the code is actually being executed in this order:

import {$,jQuery} from 'jquery';
import 'jquery-ui/ui/core';
import 'jquery-ui/ui/widgets/datepicker';

window.$ = $;
window.jQuery = jQuery;

I worked around it by using the await import('jquery-ui/...') syntax.

[GuillaumeOnepilot]

Hey, I'm facing the same problem, anyone found a solution ?

[takielias]

Is there any solution available, please?

[liamkeily]

See jquery/jquery-ui#2123 (comment)

Not really a solution, but I ended up moving away from jQuery UI. SortableJS helped with this.

[EmperorArthur]

I have a solution!

import jQuery from 'jquery';
(window as any).jQuery = jQuery;
await import("jquery-ui/dist/jquery-ui");

The problem is that the jquery-ui import happens before the assignment. Using this syntax, we ensure that doesn't happen.

[haydentech]

Tried that solution, but it results in the following error:
ERROR: Top-level await is not available in the configured target environment

The only fix for that seems to be setting the target to esnext, which is not really a solution for normal browsers.

[EmperorArthur]

Yeah, it's not perfect. Even just going with ES2022, which also works, is not something I'm super happy about.

[jpurdie]

Give this a try:

https://stackblitz.com/edit/vite-esjyyh?file=main.js

[wsli10]

Working fine in dev mode(build to esm), but get error when build to es2015:

Error: Transform failed with 1 error:
vendor-4b8a9f34.js:1857:3: ERROR: Unterminated string literal

[majchrosoft]

Currently i struggle with exactly the same issue. @jpurdie You codebase is not available anymore at this link.

Could You please copy&past solution directly here ?

[jpurdie]

https://stackblitz.com/edit/vitejs-vite-bh5wkx?file=package.json

package.json

{
  "name": "vite-vue-typescript-starter",
  "packageManager": "yarn@3.1.1",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite"
  },
  "dependencies": {
    "jquery": "^3.7.1",
    "jquery-datetimepicker": "^2.5.21",
    "jquery-ui": "^1.13.2",
    "jquery-ui-dist": "^1.13.2",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@rollup/plugin-inject": "^5.0.3",
    "@types/jquery": "^3.5.18",
    "@types/bootstrap": "^5.2.6",
    "@types/jqueryui": "^1.12.17",
    "@types/jsdom": "^21.1.2",
    "@types/node": "^20.5.7",
    "@popperjs/core": "^2.11.8",
    "axios": "^1.5.0",
    "bootstrap": "^5.3.1",
    "@faker-js/faker": "^8.0.2",
    "@rushstack/eslint-patch": "^1.3.3",
    "@vitejs/plugin-vue": "^3.2.0",
    "@vue/eslint-config-prettier": "^8.0.0",
    "@vue/eslint-config-typescript": "^11.0.3",
    "@vue/test-utils": "^2.4.1",
    "@vue/tsconfig": "^0.4.0",
    "eslint": "^8.48.0",
    "eslint-plugin-vue": "^9.17.0",
    "jsdom": "^22.1.0",
    "npm-run-all": "^4.1.5",
    "prettier": "^3.0.3",
    "sass": "^1.66.1",
    "typescript": "~5.2.2",
    "vite": "^4.4.9",
    "vitest": "^0.32.4",
    "vue-tsc": "^1.8.8"
  }
}

vite config

/// <reference types="vitest" />

import { defineConfig, splitVendorChunkPlugin } from 'vite';
import vue from '@vitejs/plugin-vue';
import inject from '@rollup/plugin-inject';
const path = require('path');

// https://vitejs.dev/config/
export default defineConfig({
  define: { 'process.env': {} },
  plugins: [
    vue(),
    splitVendorChunkPlugin(),
    inject({
      $: 'jquery',
      jQuery: 'jquery',
    }),
  ],
});

main.ts

import { createApp } from 'vue';
import './style.css';

import $ from 'jquery';
import 'jquery-ui-dist/jquery-ui';

import App from './App.vue';

createApp(App).mount('#app');

jQuery(document).ready(($) => {
  $('#jq-inner-div-a').css('display', 'block');
  $('#jq-inner-div-b').html('This text is built from jquery');
  $('#datepicker').datepicker();
});

tsconfig

{
  "compilerOptions": {
    "types": ["vitest/globals"],
    "target": "es2020",
    "useDefineForClassFields": true,
    "module": "es2020",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "allowJs": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["es2020", "DOM"],
    "skipLibCheck": true,
    "noEmit": true
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "exclude": ["node_modules", "dist/**/*"],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

[majchrosoft]

Thank You very much.
It was all about wrong version of jquery-ui

when i switched to
import 'jquery-ui-bundle/jquery-ui'

everything works

[jpurdie]

Here's an alternative with JQuery and JQuery-UI sourced externally from a CDN. I was never totally satisfied with bundling my own jquery.

https://stackblitz.com/edit/vitejs-vite-symnw7?file=vite.config.ts

Here are the main parts:

export default defineConfig({
  define: { 'process.env': {} },
  plugins: [
    vue(),
    // inject({
    //   // $: 'jquery',
    //   // jQuery: 'jquery',
    // }),
  ],
  build: {
    minify: false,
    target: 'modules',
    cssCodeSplit: true,
    emptyOutDir: true,
    outDir: 'dist',
    rollupOptions: {
      output: {
        globals: {
          $: 'jquery',
          jquery: '$',
        },
        entryFileNames: `assets/[name].js`,
        chunkFileNames: `assets/[name].[hash].js`,
        assetFileNames: `assets/[name].[ext]`,
      },
    },
    ...

<!DOCTYPE html>
<html lang="en">
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <title>Bootstrap w/ Vite</title>
   <link
     rel="stylesheet"
     href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css"
     integrity="sha512-ELV+xyi8IhEApPS/pSj66+Jiw+sOT1Mqkzlh8ExXihe4zfqbWkxPRi8wptXIO9g73FSlhmquFlUOuMSoXz5IRw=="
     crossorigin="anonymous"
     referrerpolicy="no-referrer"
   />

   <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
   <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
   <!-- 
   <link rel="stylesheet" href="/src/style.scss" />
   <script type="module" defer src="src/main.js"></script> -->

   <script type="module" defer src="dist/assets/sample.js"></script>
   <link rel="stylesheet" href="/dist/assets/main.css" />
 </head>

 <body>
   <div id="app"></div>
 </body>
</html>

import { createApp } from 'vue';

import './style.scss';

import * as bootstrap from 'bootstrap';
import App from './App.vue';

// import $ from 'jquery';
// import 'jquery-ui-dist/jquery-ui';

createApp(App).mount('#app');

$(function () {
  $('#jq-text-div').html('This text is built from jquerys');
  $('#datepicker').datepicker();
  $('#tabs').tabs();
});

console.log('UI', $.ui.version);

[wsli10]

This working for me:

import 'jquery-ui/external/jquery-1.8.3/jquery.js' // jquery must be the version which provide by jquery-ui
import 'jquery-ui/dist/jquery-ui.min.js'

Additionally，you can use jQuery-UI Download Builder to get a custom jQuery-UI.

[Geuni620]

I came across this issue while looking for a solution.

For reference, I use react with vite, not laravel.
This is what worked best for me.

// index.html
<!-- jQuery-ui -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<script type="module">
  $(document).ready(function () {
    $(".datepicker").datepicker();
  });
</script>

Other than that, we haven't set anything in package.json or vite.config.ts.