search

ezekielaquino / Marquee3000

Marquees for the new millenium
https://ezekielaquino.com/2019/marquee
MIT License
438 stars 81 forks source link

IE11 (not Edge) and ES6 #9

Open richgcook opened 6 years ago

richgcook commented 6 years ago

Can I just check this won't work on IE11 because of ES6, right?

MikeMcChillin commented 6 years ago

I was able to get it working on IE11 using a combination of the following.

Adding an alias to the minified version in my webpack config:

aliases: {
      'marquee': 'marquee3000/marquee3k.min.js'
    }

And installing and loading babel-polyfill (https://babeljs.io/docs/usage/polyfill/) before importing and initializing Marquee3k:

import 'babel-polyfill';
import Marquee3k from 'marquee';
chrisstoneking commented 6 years ago

Thanks Mike - I had to make it work on IE11, and your solution was perfect!

StudioVDS commented 6 years ago

Hi there, I'm also trying to get this to work on IE11. I'm not aware of using ES6. And don't understand the solution mentioned above.

I get a Syntax Error: File: script.js, Line: 7495, Column: 3

I use this plugin on a Drupal 8 website, with jQuery. Can anyone help me with solving this problem?

leptest commented 6 years ago

Ran into this issue too. Following the instructions from @MikeMcChillin worked.

But would like a real fix please @ezekielaquino 😄.

fariskas commented 5 years ago

anyone with an marquee3000.js just thats not in ES6? (does this make sense?) the current one doesnt work after i tried transpiling(?) and im not sure how to make that work

Jakob-Maudience commented 5 years ago

I've been using the minified version because of errors with uglify.js (even though I'm transpiling with babel, I still get an error due to es6 syntax).

It seems like the error in Marquee3000 was caused by IE not supporting the Array.from function. To fix the IE issue, instead of using @babel/polyfill (which added a lot of bloat to my code) I instead added the Array.from polyfill from polyfill.io

Here's the script tag you'll need to add before your Marquee scripts -

<script src="https://cdn.polyfill.io/v2/polyfill.js?features=Array.from"></script>

If you're not familiar with polyfill.io, it's a cdn which detects what browser your'e using and determines whether your browser needs a polyfill or not. if you look at https://cdn.polyfill.io/v2/polyfill.js?features=Array.from in Chrome or Firefox, you'll see an almost empty file. If you look at the same file in an older browser like IE, you will see that you are served the polyfill script.

The downside is that your site will have to make an external request to polyfill.io just for the sake of supporting IE which you may not like. You might want to write a more clever solution with actual feature detection instead, but using polyfill.io this is a pretty easy alternative.