Jquery Vite installation doesnt work.

Feature Requests: Jquery Vite installation doesnt work in a laravel 11 project.

Bug Reports: File: C:\myproject\myproject\package.json:

{ "private": true, "type": "module", "scripts": { "dev": "vite", "build": "vite build" }, "devDependencies": { "@vitejs/plugin-vue": "^5.0.4", "axios": "^1.6.4", "bootstrap": "^5.3.3", "laravel-vite-plugin": "^1.0.2", "sass": "^1.75.0", "vite": "^5.2.10", "vite-plugin-inject": "^1.0.1" }, "dependencies": { "@popperjs/core": "^2.11.8", "bootstrap-icons": "^1.11.3", "gasparesganga-jquery-loading-overlay": "^2.1.7", "jquery": "^3.7.1", "sweetalert2": "^11.10.8", "toastr": "^2.1.4" } }

File: C:\myproject\myproject\vite.config.js:

import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import inject from 'vite-plugin-inject'; import vue from '@vitejs/plugin-vue';

export default defineConfig({ plugins: [ laravel({ input: [ 'resources/sass/app.scss', //'resources/css/app.css', 'resources/js/app.js' ], refresh: true, }), inject({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }), vue({ template: { transformAssetUrls: { base: null, includeAbsolute: false, }, }, }), ], resolve: { alias: { vue: 'vue/dist/vue.esm-bundler.js', }, }, });

File: C:\myproject\myproject\resources\js\app.js:

import './bootstrap'; import './vue/index'; import 'gasparesganga-jquery-loading-overlay';

import toastr from 'toastr'; window.toastr = toastr;

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

import Swal from 'sweetalert2'; window.Swal = Swal;

//import '/resources/js/plugins/jquery.loadingoverlay.min.js'; // Adjust path if needed

File: C:\myproject\myproject\resources\js\bootstrap.js:

import axios from 'axios'; window.axios = axios; import 'bootstrap' window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

File: C:\myproject\myproject\resources\js\vue\index.js:

import { createApp } from 'vue'; import Lapik from './Lapik.vue'; // Adjust the path if necessary

const app = createApp({}); app.component('Lapik', Lapik); app.mount('#app');

File: C:\myproject\myproject\resources\js\vue.js:

import { createApp } from 'vue'; import Lapik from './components/Lapik.vue'; const app = createApp({}); app.component('Lapik', Lapik); app.mount('#app');

File: C:\myproject\myproject\resources\sass\app.scss:

@import 'bootstrap/scss/bootstrap'; @import 'bootstrap-icons/font/bootstrap-icons.css'; @import 'toastr/build/toastr.min.css'; //@import '~toastr/build/toastr.min.css'; body { background-color: #b2e4bf; }

npm run build: vite v5.2.10 building for production... ✓ 105 modules transformed. x Build failed in 3.65s error during build: TypeError: [vite-plugin-output] files.map is not a function at Object.buildEnd (file:///C:/myproject/myproject/node_modules/vite-plugin-inject/lib/vite-plugin-inject.js:18:6)
at file:///C:/myproject/myproject/node_modules/rollup/dist/es/shared/node-entry.js:19611:40 at async Promise.all (index 3) at async PluginDriver.hookParallel (file:///C:/myproject/myproject/node_modules/rollup/dist/es/shared/node-entry.js:19539:9) at async file:///C:/myproject/myproject/node_modules/rollup/dist/es/shared/node-entry.js:20459:9 at async catchUnfinishedHookActions (file:///C:/myproject/myproject/node_modules/rollup/dist/es/shared/node-entry.js:19956:16) at async rollupInternal (file:///C:/myproject/myproject/node_modules/rollup/dist/es/shared/node-entry.js:20443:5)
at async build (file:///C:/myproject/myproject/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:67483:18) at async CAC. (file:///C:/myproject/myproject/node_modules/vite/dist/node/cli.js:842:9)

In file: vite.config.js' on a laravel 11 project

inject({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }),
if i apply, then npm run build is broken. If i remove then jQuery is undefined!

jquery / jquery