How to make it work on vite

[chan15]

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.

[ericariyanto]

I got this error too. Is there any solution for this?

[barryp]

I believe there's a thing where you have to take the default export from the 'jquery-form' module, and call it as a function to initialize the library. Like:

import jqueryFormInit from 'jquery-form';

jqueryFormInit();

and then after that it works. I've see a similar thing with the select2 library (