Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

toby's avatar
toby
OP
3 years ago
Level 31

Using jQuery libraries w/ Vite

Hey everyone,

I want to switch some of our apps to use Vite instead of Mix. Unfortunately I can't figure out, how to correctly import the jQuery libraries. Here is the untouched app.js:

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

require('sticky-table-headers');
require('jquery.are-you-sure');

import 'select2';
require('select2/dist/js/i18n/de');
window.$.fn.select2.defaults.set('language', 'de');


window.$('.js-table').stickyTableHeaders({
    fixedOffset: window.$('#navbar'),
    cacheHeaderHeight: true,
});

window.$('.js-dirty-check').areYouSure();

window.$('.js-select').select2();

require(xxx) doesn't work, since Vite uses ES6 import; so I tried different ways of including the libraries: e.g.:

// ...
import 'sticky-table-headers';
// ...

npm run build shows no errors, but the console: Uncaught TypeError: Cannot read properties of undefined (reading 'fn'). (using $ within the console does work, so jQuery is imported correctly)

As I understand this, I just need to include the libraries (sticky-table-headers, are-you-sure and select2), they don't need to be compiled, just be copied over...

So: How do I just include those files? Is there a native Vite way of doing this or do I need a plugin?

Thanks in advance for your help!

0 likes
8 replies
Sinnbeck's avatar

Where do you try to use it? In a script tag in html or?

toby's avatar
toby
OP
3 years ago
Level 31

The above javascript is stored in resources/app.js which is loaded via @vite(['resources/css/app.css', 'resources/js/app.js']) in my blade file.

Sinnbeck's avatar

@toby ah ok so you only use it in there. Any change if you try this?

$('.js-table').stickyTableHeaders({
    fixedOffset: window.$('#navbar'),
    cacheHeaderHeight: true,
});
1 like
toby's avatar
toby
OP
3 years ago
Level 31

No. But I can simplify the problem further: Using the following app.js file still fails:

// complete resources/app.js content
import $ from 'jquery';
window.$ = window.jQuery = $;

import 'sticky-table-headers';

I still get Uncaught TypeError: Cannot read properties of undefined (reading 'fn') in the console.

I use the vanilla vite.config.js file:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});
toby's avatar
toby
OP
3 years ago
Level 31

Thanks for the link, but it still doesn't work. But the problem is not jQuery per sé but the plugins! If I just use this app.js file, jQuery and $ is available (and also works within the app.js as well as in the console!)

// complete resources/app.js

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

// import 'sticky-table-headers';

alert($('html').length);

but as soon as I uncomment the import 'any-jquery-lib' part, it fails with Uncaught TypeError: Cannot read properties of undefined (reading 'fn') :(

1 like
Sinnbeck's avatar

@toby Ok strange. I will see if I can perhaps recreate your set up later so I can see if I can find the error :)

toby's avatar
toby
OP
3 years ago
Level 31

Ok... after trying many things (and plugins...) and creating some (blank) playgrounds, I could narrow it down... It seems that I need to import jQuery in a separate file (as a module?)... So actually, this works:

// app.js
import './_jquery';

import 'sticky-table-headers';

window.$('.js-table').stickyTableHeaders();

// _jquery.js
import $ from 'jquery';
window.$ = window.jQuery = $;

I don't know exactly why, but it does at least work... Can someone please explain this to me as I would like to understand this :) Thanks in advance!

1 like

Please or to participate in this conversation.