Webpack Encore и JQuery UI (dateRangeSlider)

Question

У меня проблемы с интеграцией плагина jquery-ui с моим приложением Symfony с помощью Webpack Encore. Вы можете увидеть ошибку (TypeError: t(...). DateRangeSlider не является функцией [Узнать больше]) в консоли:

https://date-range-demo.herokuapp.com/en/blog/search

Исходный код для этого находится по адресу https://github.com/tacman/range-slider-demo, это просто демонстрация Symfony с ползунком диапазона дат на странице поиска, с помощью следующих изменений:

добавьте библиотеки в package.json из командной строки

пряжа добавить JQuery-UI JQrangeslider

добавить в /blog/search.html

    <div id="slider">Slider Placeholder</div>

добавлено в assets/js/search.js

import 'jquery-ui'; 
import 'jqrangeslider';

$('#slider').dateRangeSlider();

Ресурсы создаются с помощью 'yarn run encore dev', я уверен, что это простая ошибка конфигурации, но я не могу понять, что это такое.

Развертывание к героку добавлено еще несколько вещей, но не связанных с тем, что плагин не загружается. Чтобы увидеть эту ошибку локально, просто клонируйте репозиторий, запустите composer install && yarn install && yarn run encore dev, затем запустите сервер и перейдите в / en / blog / search.

Спасибо за любую помощь в этом!

Answer 1

После нескольких часов поиска решения я сделал это, импортировав определенные файлы: Сначала я установил jquery-ui

npm i jquery-ui --dev

Затем в моем файле js я импортировал следующие файлы (перетаскивание):

require('jquery-ui/ui/widgets/droppable');
require('jquery-ui/ui/widgets/sortable');
require('jquery-ui/ui/widgets/selectable');
import $ from 'jquery';

Answer 2

У меня была проблема с сем, но с перетаскиваемым компонентом jqueryui.

В моем приложении я использую require и не import но мне пришлось специально требовать перетаскиваемый компонент, а не весь jquery-ui.

У меня нет подходящего примера для копирования-вставки прямо сейчас, но попробуйте импортировать draggable.js файл.

Answer 3

Вместо использования jquery-ui используйте webpack-jquery-ui:yarn add webpack-jquery-ui (в конце концов с --dev опция).

А затем импортировать его с require('webpack-jquery-ui') в вашем search.js.