Sortable is not defined

Created on 30 Nov 2017  Â·  5Comments  Â·  Source: SortableJS/Sortable

I've got Sortable imported fine, but when invoking the following JS, console throws an error.

        $(document).ready(function () {
            var container = $('#sortableLinkList');
            var sort = Sortable.create(container, {
                animation: 150, // ms, animation speed moving items when sorting, `0` — without animation
                handle: ".tile__title", // Restricts sort start click/touch to the specified element
                draggable: ".tile", // Specifies which items inside the element should be sortable
                onUpdate: function (evt/**Event*/){
                    var item = evt.item; // the current dragged HTMLElement
                }
            });

            // ..
            sort.destroy();
        });
ReferenceError: Sortable is not defined
<anonymous>
/create:177:17
mightThrow
/js/app.js:21729:21
resolve/</process<
/js/app.js:21797:12

Not sure how to fix this? Is this a bug?

Most helpful comment

Well, I'm using this with a Laravel application which uses Webpack to compile the assets.
I wanted to include Sortable in the vendor.js through vendor extraction, but couldn't get that to work.
I eventually did get it working but it's a bit hacky.

window.Sortable = require('sortablejs'); in my resources/assets/js/app.js allowed Sortable to work as expected, even though it is cluttering the window object with variables...

All 5 comments

Could you please attach a JSBIN or JSFiddle to descrive your issue?

Also, include the following if you have not :

Well, I'm using this with a Laravel application which uses Webpack to compile the assets.
I wanted to include Sortable in the vendor.js through vendor extraction, but couldn't get that to work.
I eventually did get it working but it's a bit hacky.

window.Sortable = require('sortablejs'); in my resources/assets/js/app.js allowed Sortable to work as expected, even though it is cluttering the window object with variables...

@EdanBrooke If you want to keep sortable script inside blade then do following on app.js

import Sortable, { MultiDrag, Swap } from 'sortablejs';
// global export
window.Sortable = Sortable;

i got the same problem

<script type="module" src="/sortablejs/Sortable.min.js" charset="utf-8"></script>
<script type="module" src="/sortablejs/modular/sortable.core.esm.js" charset="utf-8"></script>
<script type="module" src="/sortablejs/modular/sortable.complete.esm.js" charset="utf-8"></script>

Screen Shot 2019-11-05 at 10 55 46

Hi everyone, I run across this same problem . Just like OP , I'm using Laravel (5.8.x) and the module compiles alright.
However when trying to use it I get the ReferenceError. Also, the workaround proposed there doesn't work for me.
If anyone has any clue, I'll be thankful.
Cheers!

EDIT:
Ok , I got it working by linking the js with

Not ideal, but it's working as expected now.
Thanks for the good work!

Was this page helpful?
0 / 5 - 0 ratings