Sylius: $(...).sortable is not a function

[tchapi]

When I access the backend, after having run npm install and npm run gulp correctly, I have an error in the Javascript :

$(...).sortable is not a function

And the backend menu is not usable, which is a problem. I think this is related to the sorting of taxons ...

Thanks

[Arminek]

It looks like something went wrong with npm install command. Make sure you have sortablejs in your node_modules if not try to delete whole node_modules and try again with npm install.

[tchapi]

Yes my package.json is up to date, I have tried deleting the whole folder and run the commands again, but to no avail ...

[tchapi]

Wouldn't it be linked to jQuery support in the package ? https://github.com/RubaXa/Sortable#jq

[sweoggy]

Got this as well after re-running gulp, any workaround?

[tchapi]

Yeah, in fact the Gulpfile.js is a terrible mess if you have Sylius as a dependency (like in Sylius-Standard for instance). It's now fundamentally broken in Sylius-standard since https://github.com/Sylius/Sylius/commit/079118c1bd5444b13e0b391486ae4415d7d8a9ab — the assets are written inside the vendor/sylius/sylius folder, which is non-sense, and you have to do npm install inside vendor/sylius/sylius as well as in your root folder, if you want to have all the correct dependencies.

I've not made a PR yet but I will at some point, until then, this is the Gulpfile I use :

var gulp = require('gulp');
var chug = require('gulp-chug');

var syliusRootPath = 'vendor/sylius/sylius/';
var syliusAssetsPath = syliusRootPath + 'web/assets/';

var adminBundleRootPath = syliusRootPath + 'src/Sylius/Bundle/AdminBundle/';
gulp.task('admin:bundle', function(done) {
    gulp.src(adminBundleRootPath + 'Gulpfile.js', { read: false })
        .pipe(chug(done))
    ;
});

gulp.task('admin', ['admin:bundle'], function() {
    gulp.src(syliusAssetsPath + 'admin/**/*')
        .pipe(gulp.dest('web/assets/admin/'))
    ;
});

var shopBundleRootPath = syliusRootPath + 'src/Sylius/Bundle/ShopBundle/';
gulp.task('shop:bundle', function(done) {
    gulp.src(shopBundleRootPath + 'Gulpfile.js', { read: false })
        .pipe(chug(done))
    ;
});

gulp.task('shop', ['shop:bundle'], function() {
    gulp.src(syliusAssetsPath + 'shop/**/*')
        .pipe(gulp.dest('web/assets/shop/'))
    ;
});

gulp.task('default', ['admin', 'shop']);

[sweoggy]

That worked great, thanks. I did the following:

1. Updated my package.json file to match that of https://github.com/Sylius/Sylius/blob/master/package.json
2. Run npm install
3. Tried to run gulp with the Gulpfile.js found in repo https://github.com/Sylius/Sylius/blob/master/Gulpfile.js, didn't work
4. Replaced the Gulpfile.js with the one you provided above
5. Run gulp, worked!

[tchapi]

No worries, my pleasure to help

[gorkalaucirica]

For us worked doing the following (we have the Gulpfile from SyliusStandard):

1. npm install sortablejs
2. Add installed dependencies to admin-js paths:

var paths = {
  admin: {
    js: [
      'node_modules/jquery/dist/jquery.min.js',
      'node_modules/semantic-ui-css/semantic.min.js',
      'node_modules/sortablejs/Sortable.min.js',
      'node_modules/sortablejs/jquery.binding.js',
      (...)
    ],
    (...)
  }
}

1. Run gulp as usual

[pjedrzejewski]

We are working with @Arminek on a solution to this problem. :) Sortable has been ultimately removed (due to problems with stability of the JS testing).

[tchapi]

I see that the new Gulpfile more or less incorporates these changes, focusing on Sylius installation as a dependency — to me this is solved for now