IE11 - loadComponents Syntax Error: Syntax Error

[jasonswan37]

Running React 16 with Webpack and Babel. Rendered server side.

Latest version of react-flip-toolkit, window.Promise is polyfilled by babel-polyfill.

This works as expected in Chrome, Edge, Firefox and Safari but not IE11. On Component load the loadComponents Syntax Error occurs as follows:

I have tried swapping my Flipper and Flipped imports to react-flip-toolkit/es/core as well as react-flip-toolkit/lib/core but to no affect. I have also attempted to change my webpack config for @babel/preset-env to useBuiltIns: 'entry' as well as useBuiltIns: 'usage' - while specifying import 'babel-polyfill' at the top of my entry file, or webpack entry list.

Typing window.Promise into the IE11 console shows that Promises are indeed working as intended, as well as all other Promises in my application are working correctly. I have also tried importing Polyfill.io scripts for Promise, and while these imported correctly this didn't change the issue I have been having.

[aholachek]

Hi, thank you you for making this issue. Would you mind looking at this react-flip-toolkit example in IE and letting me know if it's working for you? I wonder if it's something to do with localhost because when I test on lambdatest on IE11, I can view the built examples without errors. I'm working on getting an open source membership to browserstack so I can test localhost on IE more aggressively, but until then could you please 1) try out the example link above to see if it errors for you and 2) click on the localhost:3000/assets/main.js message in your error stack and take a screenshot of the offending line(s)?

[jasonswan37]

Hi, thanks for the fast response.

I can confirm the example works for me (through browserstack) without errors.

assets/main.js 14377:1 appears to just be the webpack compilation of this module:

[aholachek]

Ah ok, thanks for checking. The example I sent you is built with parcel, not webpack, so I wonder if that has any effect. I'll hopefully get browserstack access soon, test things out, and report back.

[aholachek]

I just tried running a project in browserstack on IE11 built with create-react-app that imported and used react-flip-toolkit and could not reproduce any error.

Is there any way you could provide a reproducible test case that I could have a look at?

[thomasboyt]

I'm also getting a syntax error in IE11; there's an uncompiled arrow function in es/index.js that looks to be causing it. I'm kind of surprised by this given that tsconfig.json has a target of es5, but I suspect it's possible that Rollup('s TypeScript plugin) ignores this?

FWIW, I'm using Webpack/Babel via the Webpacker Rails gem, which does not handle any node_modules compilation out of the box (at least, not on the 3.x branch). However, create-react-app now compiles dependencies as of 2.x (I think it does this quickly through new Babel 7 stuff, unfortunately for me), so it makes sense that it'd be working there.

I dunno if the proper way to fix this is to ensure the output is actual ES5, or to ask users to ensure they're compiling their Babel dependencies; I have no idea what the state-of-the-art is in the latter regard but if Babel 7 usually enables it out of the box it doesn't seem unreasonable to ask. I should be able to override Webpacker's default Webpack config to tell it to specifically compile react-flip-toolkit, so this thankfully isn't blocking - assuming this is the same syntax @jasonswan37 is having an issue with, maybe they can do the same in their Webpack config?

[aholachek]

@thomasboyt thanks, your comment led me to realize that the forked version of reboundjs is not being sent through the typescript compiler (I was too lazy to convert it to typescript), so when I switched to typescript + rollup it stopped getting compiled.

I also am not familiar with up-to-the-moment best practice but I think it's still best to transpile the library for people, so I added babel just for the reboundjs files and everything seems to be working ok now, here's a link to the compiled es/index.js.

@jasonswan37 would you mind checking out v6.5.3 whenever you get a chance to see if it fixes your problem? And thank you again for catching this.

[eugene1g]

@aholachek v6.5.3 fixed IE11-compat for me, thanks!

[jasonswan37]

@aholachek That does fix the initial issue with the page not loading, however this does lead to another error with react-hot-loader being unable to update when I trigger a property update for the components inside the Flipper

Offending line seems to be this one:

Not sure if this is a configuration thing with webpack, using a hot loader, or just IE being IE

EDIT: After spinning up one of Microsoft's free IE11 Win 7 VMs, and testing in a UAT environment, this works fine on IE. Must have been either hot loading being odd, mixed with browserstack being extremely slow. Either way thank you very much for your help @aholachek !

[afreix]

@jasonswan37 I'm noticing the same exact issue on IE 11 and Edge. I've polyfilled window.Promise with babel-polyfill, and am using Typescript 3.0.3 and webpack 4.28.4. Any ideas?

[jasonswan37]

@jasonswan37 I'm noticing the same exact issue on IE 11 and Edge. I've polyfilled window.Promise with babel-polyfill, and am using Typescript 3.0.3 and webpack 4.28.4. Any ideas?

@afreix I updated to the latest version of the library (^6.5.3) and this worked fine for my use case, IE11 No more errors, animations working fine - however it still doesn't work with react-hotloader in IE11 only. Therefore it needed testing in another environment. Other than that all is as expected.

[afreix]

@aholachek I ended up figuring out where the issue was coming from, and I wanted to make you aware. The problem occurs in IE 11 and Edge if our devtool option in webpack uses any "eval"-prefixed option.

This blog post has a detailed explanation of why this happens: https://medium.com/@CWMma/doing-something-simple-5cdc65c416ba