Codesandbox-client: Polyfilling React applications for IE11

[theetrain]

First of all, great job on codesandbox. I'm thoroughly impressed with how fast the text editor loads, and how responsive everything is!

Issue

I'm working on a React project, and I'm guessing it runs npm start automatically as I make changes in code. I tried running my project's web page in IE11, however there is a syntax error since arrow functions are not converted to ES5.

Proposal

Is it possible to babelify my code with react-create-app and codesandbox? If not, I may be able to contribute such a feature.

References

Here is my project: https://codesandbox.io/s/kokj3jqnjo

[tomkuehl]

Hi,

do you try to run the finished bundle in IE11 or the sandbox? codesandbox already uses create-react-app as a template for new react sandboxes, so the bundle should work just fine in IE11.

If you want to add custom Babel plugins/presets etc. you can already do with the new vanilla template (based on Parcel). Here is an example i've created: https://codesandbox.io/s/nrx2x32k90

However i don't know if codesandbox official supports IE11? @CompuIves

EDIT:
There is an old issue facing the same problem: https://github.com/CompuIves/codesandbox-client/issues/218

[CompuIves]

Heya, I think since we added test support we lost compatibility with IE11. I started looking into it here #612, but got distracted along the way.

I think the problem is that we now include ansi-styles in the bundle, and it seems like they are using arrow functions in their code. I tried transpiling ansi-styles explicitly but something didn't work correctly with that...

This error started occurring: http://pr612.cs.lbogdan.tk/s/new (Uncaught TypeError: Cannot redefine property: exports)

[CompuIves]

IE11 is back!

[ElliotPsyIT]

Using IE11 to bring up a codesandbox demo Vue-Highcharts Demo, I ran across this error (below). No problem viewing the demo on Chrome. Also, the codesandbox.io URL also seems broken on IE11 - I get a quick page flash, and then a frozen black page.

Is it me?

[lbogdan]

Loading the homepage I get the Object doesn't support property or method 'find' error in the console, which seems to suggest a missing polyfill (for Array.find(), specifically). I'll reopen this until we take a look at it.
Out of curiosity, what is your use case for still using IE11?

[ElliotPsyIT]

I work for the U.S. federal government and within our internal network IE11 is the standard installation. Chrome is being allowed as an optional download, but I can't rely on that for apps.

[CompuIves]

We automatically check if new.codesandbox.io works with a test suite. Maybe
something goes wrong with the Vue template and IE11. I have a hunch where
that could be, I can take a look today and hopefully fix it!

On Wed, May 2, 2018, 10:15 elliotfielstein [e-mail] wrote:

I work for the U.S. federal government and within our internal network
IE11 is the standard installation. Chrome is being allowed as an optional
download, but I can't rely on that for apps.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
https://github.com/CompuIves/codesandbox-client/issues/611#issuecomment-386052712,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAj1CPBE4OFpstqQ14tf_Fz-45Rlm5YRks5tuemjgaJpZM4SaDq_
.

[lbogdan]

@CompuIves While looking around the homepage I've noticed we're not loading any polyfills there - Gatsby only loads some polyfills it needs, like the Promise one, but no Array methods, so the homepage is broken in IE11 (because of missing Array.find()).

[ElliotPsyIT]

I very much appreciate your interest and the prompt attention!

Codesandbox is a remarkably useful tool. Thanks so much for contributing it to the open source community. (I learned about it on the Cerebral discord, BTW, and am diving in headlong)

[lbogdan]

Fixed the homepage in #786 , @ElliotPsyIT can you please test it at http://pr786.cs.lbogdan.tk/ ? Thanks!

[ElliotPsyIT]

Unfortunately, since I'm testing within our network I'm unable to access that URL ...

[ElliotPsyIT]

Checking again, I see no change. It still looks like a polyfill issue on the codesandbox.io site. I've made sure in IE11 settings to look for a new version of every page with each visit to avoid this being a caching issue. Also, I still see the same errors I posted above on the example vue-highcharts sandbox ...

Maybe something on my end now?

[lbogdan]

@ElliotPsyIT We didn't deploy it to production just yet, we'll let you know.

Btw, is https://codesandbox.io/s/vue working for you? It doesn't seem to work for me in IE11.

[ElliotPsyIT]

My apologies. And yes, that sandbox works in IE11!

[ElliotPsyIT]

@lbogdan I'm curious about the problem you see with https://codesandbox.io/s/vue on IE11? For me during loading, it took a really long time to compile but finally completed and ran without error.

[lbogdan]

@ElliotPsyIT Hey, the IE fixes were just deployed, and, at least for me, the Vue-Highcharts Demo sandbox is working smoothly. Please test (the homepage should work fine, too) and let us know.

[ElliotPsyIT]

Bingo! I can confirm that both the codesandbox homepage and the Vue-Highcharts sandbox work fine in my IE11 testing. Thank you so much for your kind assistance and willingness to support of IE11 (at least for now)!!

[lbogdan]

@theetrain Your sandbox should now work in IE11. I'm closing this, please reopen if you have other IE11 related issues.

[newbreedofgeek]

@CompuIves

Heya, I think since we added test support we lost compatibility with IE11. I started looking into it here #612, but got distracted along the way.

I think the problem is that we now include ansi-styles in the bundle, and it seems like they are using arrow functions in their code. I tried transpiling ansi-styles explicitly but something didn't work correctly with that...

This error started occurring: http://pr612.cs.lbogdan.tk/s/new (Uncaught TypeError: Cannot redefine property: exports)

I'm having this same issue after I put "mode_modules/ansi-styles" through babel - How did you manage to solve this issue?

[roetiej]

mode_modules/ansi-styles

I'm having the same issue. Any updates?