Draggable: Bug: Browser example for Sortable not working

[asmith26]

2. Describe the bug or feature

Bug: The example for Sortable does not work.

3. If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem

<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/draggable.bundle.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@shopify/[email protected]/lib/sortable.js"></script>

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

<script>
    const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li'
});

sortable.on('sortable:start', () => console.log('sortable:start'));
sortable.on('sortable:sort', () => console.log('sortable:sort'));
sortable.on('sortable:sorted', () => console.log('sortable:sorted'));
sortable.on('sortable:stop', () => console.log('sortable:stop'));
</script>

Inspecting the Google Chrome console:

Uncaught TypeError: Sortable is not a constructor at index.html:11

4. Please tell us about your environment:

• Library version: 1.0.0-beta.8
• Browsers: Chrome Version 70.0.3538.67 (Official Build) (64-bit)
• Tech stack: HTML, Javascript

Thanks

[bologer]

@asmith26,

Change:

const sortable = new Sortable(document.querySelectorAll('ul'), {
  draggable: 'li'
});

to

const sortable = new Sortable.default(document.querySelectorAll('ul'), {
  draggable: 'li'
});

and it should start working

[bologer]

36

[asmith26]

Thank you for your help!