How to make it work on vite

Description:

I used vite as the pack tool, there is my vite config below:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import inject from "@rollup/plugin-inject";
import requireTransform from 'vite-plugin-require-transform';

export default defineConfig({
    plugins: [
        requireTransform({
            fileRegex: /.(js|jsx|ts|tsx)$/,
        }),
        inject({
            $: 'jquery',
            jQuery: 'jquery',
        }),
        laravel({
            input: [
                'resources/css/chan.scss',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

app.js

import "jquery-validation";
import "jquery.cookie";
import "jquery-form";

$(function() {
    $('#frm').validate();
    $('#frm').ajaxForm({
        success: function(response) {
            console.log(response);
        }
    });
});

I got TypeError: Ge(...).ajaxForm is not a function, other old jquery plugins works perfectly, need your help to solve this issue, thanks.

Start with the supplied vite.config.js and app.js, reproduce the TypeError, and inspect how the jquery-form import is exposed after Vite bundling. Confirm the integration by making the shown $('#frm').ajaxForm call work without the error and verify the other listed plugins still load.