Draggable: Regression in "Symbol" polyfill in legacy bundle in IE11

[mniebling]

After recently upgrading from 1.0.0-beta.4 legacy to 1.0.0-beta.5 legacy at work, I noticed a "Symbol is undefined" error in IE11 which began crashing the app where we're using Draggable.

Quite possible I'm missing something about how to use the legacy bundle but the way we were consuming it didn't change from beta 4 to beta 5. Maybe the changes in 3f8154c introduced an issue with the bundled output?

I'm able to repro the error in a codepen:
1.0.0-beta.4 - fine in IE11
1.0.0-beta.5 - Symbol is undefined in IE11, demo is broken

Please tell us about your environment:

• Library version: 1.0.0-beta.5 legacy bundle
• Browsers: IE11 (11.248.16299.0 to be precise)
• Tech stack: Using Webpack 3 / Angular 1.5 at work, but can repro in a minimal codepen

[beefchimi]

Interesting. Even though nothing about your implementation has changed, any chance we can see a js code snippet? I would sometimes see a similar error when I passed in the wrong kind of argument for initializing Draggable.

We do pull in the core-js Symbol polyfill here:
https://github.com/Shopify/draggable/blob/master/src/index.legacy.js#L1

Nothing has changed about that... I can try troubleshooting this possibly over the weekend if I get the chance.

[mniebling]

Sure thing, in our app we are setting it up like so:

import {Sortable} from '@shopify/draggable/lib/draggable.bundle.legacy'

export default class SomeComponentController {
  // constructor and other stuff omitted...

  $onInit() {
    const containers = this.$document[0].querySelectorAll('.has-draggable-items')

    this.sortable = new Sortable(containers, {
      draggable: '.js-sortable-item'
    })
  }
}

I don't see too much different from the failing Codepen:

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

[beefchimi]

So strange. Definitely a core-js polyfill issue... just not sure why its become a problem since the previous beta.

@mniebling I forked your pen here:
https://codepen.io/beefchimi/pen/RMGOwG

The generated beta5 legacy bundle used in that codepen has all of its core-js polyfills removed... and before loading the legacy bundle, I load the entirety of core-js from a CDN. This solves the problem... but ideally our legacy bundle has the bare minimum polyfills baked in.

@tsov I tried pulling in multiple different core-js polyfills and rebuilding the legacy bundle, but I could not track down exactly what is needed to resolve this issue. In fact, I even imported all of es6 and es7 and still I got the same error.

Do you know exactly what is causing this and what single import we should use?

Also, although the pen seems to work in IE11, we still get an error for:
Unable to get property 'set' of undefined or null reference

[tsov]

That is an interesting issue, not sure how that could have happened, but will check this out soon. I may try and see if the commit you mentioned @mniebling introduced this.

I think the only workaround is to import core-js polyfills in your project manually

import 'core-js/es6/symbol';
import 'core-js/es6/promise';
import 'core-js/fn/object/assign';
import 'core-js/fn/array/includes';

import {Sortable} from '@shopify/draggable'

[mniebling]

Thanks for the investigation here. Manually including core-js is a good suggestion as well. I'll stay tuned & am happy to help test out any changes here.

[tsov]

@mniebling we just released beta.6, which includes a fix for this. Closing this issue now, but feel free to re-open if things still don't work.

[mniebling]

Thanks for the work on this! I know IE compatibility is not the most exciting way to spend your time. Things are improved, but unfortunately looks like it may not be resolved yet.

I got around to testing 1.0.0-beta6 this week and saw no more Symbol is undefined in IE11, but now I see an Expected identifier error from inside the draggable JS. This still bricks the site for us, and can be reproed in a new codepen.

The line IE doesn't like is:

function onSortableSortedDefaultAnnouncement({ dragEvent }) {

[tsov]

@mniebling that may be because we started exporting in ES6 by default. We also export ES5 bundles, but you'll need to explicitly import them by adding /es5/

Example for the legacy bundle: @shopify/draggable/lib/es5/draggable.legacy.bundle.
Although I'd argue that the legacy bundle should always be in ES5

Hope this helps

[beefchimi]

Although I'd argue that the legacy bundle should always be in ES5

agreed 😅

[mniebling]

Oooh, yup, I missed that but updating to the ES5 bundle definitely fixes the codepen. Thanks!!

+1 for defaulting the legacy bundle to ES5, or at least calling out the path difference in the Install part of the readme -- I do see it mentioned in the filesize table now that I look, but not in the CDN block which is what I first used to figure out the path to the legacy bundle.

[tsov]

+1 for defaulting the legacy bundle to ES5

Agreed 👍 will change it up and fixup the docs to mention the ES5 vs ES6 importing. Thanks for bringing this up @mniebling