Make React Work with Internet Explorer

24 Apr 2018

We are building a website for one of our clients, and he told me one day that, one of his potential client couldn’t see the site using Internet Explorer. Then we quickly realized that there are still people out there using old versions of Windows and didn’t have any other browsers than the old Internet Explorer. Brought back a lot of good memories when I first started at Amazon and had to work on IE 6 compatibility issues.

We used mainly React for the business logic, and Ant Design for styles and interactions, so first thing we looked at is the React documentation on JavaScript environment requirements. So we added the following to the entry point index.js of our create-react-app.

// react polyfill
// https://reactjs.org/docs/javascript-environment-requirements.html
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'raf/polyfill';

We restarted the app, and found that the script still didn’t load on IE. So we looked into the error in dev console:

Object doesn't support property or method 'startsWith'

After quick search on Google, we found that we needed to polyfill the string methods as well, so adding another polyfill for that:

// antd polyfill
// https://github.com/ant-design/ant-design/issues/3400
import 'core-js/es6/string';

We have used react-intl and we found an error message in IE. And there is a link describing the issue here on how to fix, so we followed and added those as well.

Then viola! the site is running again! But wait, the styling is off. I spent a whole day on IE 9 trying to figure out what was going on. What I noticed was that the CSS was loaded, but partially. The antd styles were there but the custom CSS we wrote wasn’t loading.

After some research and consulting with friends, I stumbled upon this 6 years old Stackoverflow post then I quickly realized that it was the CSS selector limit on IE 9 that was causing the problem.

There are a few solutions we can take, but for the sake of going through everything and make the site work first, I chose to load antd stylesheet separately via CDN. And the styles showed up. But of course they didn’t look right because CSS Flexbox is not supported in IE 9. Even IE 10 the syntax is different.

There are a few solutions for fixing the Flexbox issues in IE, and eventually we are going to try these. However, before we tried to fix Flexbox issues, I was trying to type on the form but none of my keystrokes register. Ugh. This issue pretty much put the nail in the coffin for IE 9 compatibility for now with our solution. I suspect the rc-form component had something that made it not work in IE 9.

So for now what we are doing with our client, is that we support everything down to IE 11, and we made sure that they look right. For IE 10, we will make it work but not look right.

EOF

Comments