Vue-carousel: Question: codepen.io on IE11 not working

[kulaone]

Any clues why this code is not working in IE11?
https://codepen.io/kulaone/pen/pVbKmq

Thanks

[quinnlangille]

Hmm we might need to add a polyfill for something, any console error? I don't have IE on my PC right now and can't test for a bit

[kulaone]

I'm working on a mac using browserstack

This is what I see on the codepen.io console:

[object Error] {
  description: "Unable to get property 'includes' of undefined or null reference",
  number: -2146823281,
  stack: "TypeError: Unable to get property 'includes' of undefined or null reference
   at Anonymous function (https://ssense.github.io/vue-carousel/js/vue-carousel.min.js:6:22155)
   at t (https://ssense.github.io/vue-carousel/js/vue-carousel.min.js:6:22132)
   at St.prototype.get (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js:6:15991)
   at St.prototype.evaluate (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js:6:17139)
   at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js:6:19021)
   at e.default.computed.isActive (https://ssense.github.io/vue-carousel/js/vue-carousel.min.js:6:22318)
   at St.prototype.get (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js:6:15991)
   at St.prototype.evaluate (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js:6:17139)
   at Anonymous function (https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js:6:19021)
   at t.exports.render (https://ssense.github.io/vue-carousel/js/vue-carousel.min.js:6:22594)"
}

[quinnlangille]

Hmm ok, we only use includes in two spots on the carousel and both are in slides. Which version of vue are you using? Should be above v2.2.0 since we're using provider/injection

[kulaone]

I'm using this one:
https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js

[quinnlangille]

Hmm ok that seems legit. I looks as if slide is not seeing the reference to carousel, I solved a similar bug in our JSfiddle examples and the culprit was an old vue version.. not 100% what could be causing here. Can you try rolling back vue-carousel versions until one works, that way we can better isolate the cause

[kulaone]

Can I find old versions on CDN?

[quinnlangille]

Yup, you can find any version here: https://www.jsdelivr.com/package/npm/vue-carousel

[kulaone]

It stoped working on v0.7.0

[quinnlangille]

Hmm that was when we added the provider/injection pattern vs using refs, and requires the vue bump. Was the same issue I was having, and the same error I was having with the JSFiddle problem. I'm not sure what provider/inject uses under the hood but maybe it has a compatibility issue with vue2.5

[danpottshimself]

Still no fix for this? getting the exact same issue

[quinnlangille]

It's looking like this is an issue with vue and ie11 - we upped our vue version with v0.7.0. It's likely that we'll just need to polyfill something, what that something is will require some investigation

[alekpentchev]

It looks vue-carousel is using method includes() which is not supported in IE 11. Take a look at the screenshot:

It shows that IE does not support this method. I believe adding a polyfill for that should resolve the issue. Unfortunately when I opened local server on IE to test this solution it showed me another error (not related to this issue) that Vuex needs a polyfill for Promise.

[quinnlangille]

@alekpentchev yeah I was in a similar situation when investigating this, it seems like a bit of a rabbit hole. If you come up with a solution feel free to open a PR and I can check it out, would be a huge boost towards v1.0 to have this fixed

[alekpentchev]

Sure, I will think about it. If you or anyone else would have an idea, let me know.

[asallay]

The slider works perfectly in Internet Explorer 11 with the Array.prototype.includes() polyfill.

Unfortunately, IE11 doesn't support translate3d(), so you'll have to change that for translate() too.

[alekpentchev]

Thanks for giving feedback it works this way.
I've checked what causes that local dev server doesn't render properly (mentioned it before - promise polyfill required). I can confirm that it's vue-play's fault that we get white page.
When it comes to this issue with array method includes - it will be easy to overcome. But I'm thinking now how to fix this vuex polyfill issue before I can move forward.

EDIT: I have managed to run vue-carousel with vue-play locally. Now it's time to add and test the array.prototype.includes() polyfill. :)