Make React Work with Internet Explorer
- Wine (recursive backronym for Wine Is Not an Emulator) is a free and open-source compatibility layer that aims to allow application software and computer games developed for Microsoft Windows to run on Unix-like operating systems.Wine also provides a software library, known as 'Winelib', against which developers can compile Windows applications to help port them to Unix-like systems.
- I tried to install Internet explorer 6.0 for a laugh,then i played around with a few apps.
- I'm trying to use React with Internet Explorer 9 but getting the following errors even trying to run something very barebones: SCRIPT438: Object doesn't support property or method 'isArray' react-with-addons.js, line 4 character 317. SCRIPT438: Object doesn't support property or method 'create' JSXTransformer.js, line 4 character 326.
Wine is free software, released under the GNU LGPL; see the file LICENSE for the details. QUICK START From the top-level directory of the Wine source (which contains this file), run:./configure make Then either install Wine: make install Or run Wine directly from the build directory:./wine notepad Run programs as 'wine program'. Reactos Install Internet Explorer. Posted on - 6/8/2019. I'm trying to use React with Internet Explorer 9 but getting the following errors even trying to run.
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.We restarted the app, and found that the script still didn’t load on IE. So we looked into the error in dev console:
After quick search on Google, we found that we needed to polyfill the string methods as well, so adding another polyfill for that:
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.Install Internet Explorer For Mac
There are a fewsolutions 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.