4

I'm having trouble integrating a jquery-ui plugin with my Symfony app using Webpack Encore. You can see the error (TypeError: t(...).dateRangeSlider is not a function[Learn More]) in the console:

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

enter image description here

Source code for this is at https://github.com/tacman/range-slider-demo, it's simply the symfony demo with a date range slider on the search page, via the following changes:

add the libraries to package.json from the command line

yarn add jquery-ui jqrangeslider

add to /blog/search.html

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

added to assets/js/search.js

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

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

Assets are build with 'yarn run encore dev', I'm sure it's a simple configuration error but I can't figure out what it is.

Deployment to heroku added a few more things, but are unrelated to the plugin not loading. To see this error locally, simply clone the repo, run composer install && yarn install && yarn run encore dev, then start the server and go to /en/blog/search.

Thanks for any help on this!

Tac Tacelosky
  • 3,165
  • 3
  • 27
  • 28
  • Instead of using jquery-ui, use webpack-jquery-ui : yarn add webpack-jquery-ui (eventually with the --dev option). And then import it with require('webpack-jquery-ui') in your search.js. This is the only solution I found, but I can’t explain why it doesn’t work without it. – Julien Busset Oct 29 '21 at 07:13

2 Answers2

7

After hours of searching for a solution,I've done that with importing the specific files : First i've installed jquery-ui

npm i jquery-ui --dev

Then in my js file i've imported the following files(drag and drop):

require('jquery-ui/ui/widgets/droppable');
require('jquery-ui/ui/widgets/sortable');
require('jquery-ui/ui/widgets/selectable');
import $ from 'jquery';
Houssem
  • 6,409
  • 3
  • 18
  • 28
2

I had the seme problem but with the draggable component of jqueryui.

In my app I use require and not import but I had to specifically require the draggable component, not the whole jquery-ui thing.

I don't have a proper example to copy-paste right now, but try importing the draggable.js file.

Etshy
  • 870
  • 7
  • 25