2

I'm aware this is already documented but I can't find a solution working in my case.

The following code needs .sortable() to work :

import "jquery-ui/ui/widgets/sortable"; //also tried with import "jquery-ui"
[...]    
this.$wrap.find("#data, #options-choices").sortable({
                axis: 'y',
                containment: 'parent',
                handle: '.dragHandle',
                tolerance: 'pointer'
            });

The following error is thrown :

TypeError: this.$wrap.find(...).sortable is not a function

The jQuery selector seems ok.

I'm using Webpack, jQueryUI seems to have issues when used through it. Leading all my attempts to fail, with custom loaders found on other Stackoverflow posts (mostly on Angular projects).

Jquery-ui was installed using npm install jquery-ui. Also tried with "jquery-ui-sortable-npm" package with no success.

Any ideas are welcome, thanks.

Solution :

Added window.jQuery and global.jQuery to providePlugin (was already using $ and jQuery) in webpack.config.js file

const providePlugin = new webpack.ProvidePlugin({
    '$':'jquery',
    'jQuery':'jquery',
    'window.jQuery':'jquery',
    'global.jQuery': 'jquery'
});

Installed jquery-ui-bundle

npm install --save jquery-ui-bundle

Was also allowed to uninstall full jquery-ui (not a dependency to this package)

Then in the file where my .sortable() function is, simply imported

import 'jquery-ui-bundle';

Still, I'm fully aware this is far from an optimal solution, since jquery-ui-bundle is not supported by official team.

Kleioz
  • 294
  • 3
  • 13
  • 1
    I think following post helps you. https://stackoverflow.com/questions/44932576/jquery-ui-sortable-is-not-a-function-with-webpack – Ali Soltani Jan 05 '18 at 13:43
  • Made my day. Even if the working solution is quite dirty imo. Edited OP to explain it. Thanks a lot ! – Kleioz Jan 05 '18 at 14:14

0 Answers0