Как готовить jQuery и Laravel Vite правильно?

Question

[Сергей Горячев]

Доброго дня, уважаемые коллеги)
Использую Laravel + Vite, пытаюсь использовтаь сверху jQuery.
Вроде всё просто, по инструкции https://laracasts.com/discuss/channels/vite/larave...

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

Дальше какой-то банальный скрипт, аля

$(".component").css({
    "padding-top" : $(".header").outerHeight(true)
});

выполняется без проблем.
Покдлючение некоторых сторонних библиотек тоже import 'slick-carousel/slick/slick'; работает.
Но это только поверхностно, ибо большинство библиотек не видит jQuery и валит ошибку.
Uncaught ReferenceError: jQuery is not defined
Всё устанавливается через npm install ... но половину скриптов могу использовать, а половина не видит библиотеки.
Возможно что-то делаю не так, не отрицаю.
В частности не работают lightslider и typeit.
Как бы с этим окончательно разобраться)))
PS: если подключать те же библиотеки в head через простой sсript, то всё нормально работает.

Comments

[iljaGolubev]

typeit разве использует jquery?

Answer 1

[iljaGolubev]

https://api.jquery.com/jquery.noConflict/

Для начала так, но можно и через vite.config.js прикручивать

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

и

document.addEventListener('DOMContentLoaded', function () {
	// init lightslider 
}, false);

Включите "Pause on Exceptions" и когда вываливается Uncaught ReferenceError: jQuery is not defined проверьте window.jQuery, window.$

Answer 2

[Сергей delphinpro]

ну раз jQuery undefined то может нужно его вкинуть в глобальный скоуп, как думаете?

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

Правильно написанная библиотека всегда ссылается на jQuery, а не на доллар.

Comments

[Сергей Горячев]

Это я пробовал, не сильно что-то меняется.

Answer 3

[AndreyNee]

Тоже долго искал решение. В итоге наткнулся на такой же вопрос на StackOverflow, в котором пользователь с ником "shanecp" отвечает, почему возникает проблема с jQuery в проектах где используется Laravel + Vite.

Если коротко, то это происходит из-за порядка загрузки модуля Vite.
Vite загружает скрипты в виде модулей.
А модули всегда выполняются в отложенном (deferred) режиме (ссылка на доку learn.javascript.ru).

Таким образом, если ваш скрипт написанный на jQuery размещен после директивы Vite, то этот скрипт выполняется прежде, чем загрузится сам jQuery и это вызывает ошибку $ is undefined.
В общем там советовали переместить код jQuery в app.js файл, чтобы он оставался в своем собственном модуле.