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

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!