/react-ie8

Make your React app work in IE8

中文 README

Make your React app work in IE8

It's really a dispiriting news that Starting with React v15, we're discontinuing React DOM's support for IE 8. There are still more than 18% people who are using IE8 in China.

Anyway, react-ie8 will continuously provide a series of Examples for people who are facing the same compatible problems, as well as collecting issues.

Have fun with react-ie8 Examples, and feel free to Open an issue.

How to

First you shouldn't use React v15 or higher version anymore. Just use React v0.14 which still support IE8.

If you need docs for React v0.14, go to http://react-ie8.xcatliu.com

Using CommonJS

I highly recommend to use CommonJS style to include required packages.

First install these packages:

npm install --save es5-shim console-polyfill

Then insert the code into the beginning of your entry file:

require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');

See React IE8 Hello World Example for a real example.

React Static Boilerplate

React Static Boilerplate A React static boilerplate that supports IE8，To view Demo

Other Problems

Some problems are actually not the problem of React, but I also list them below:

Error Message Reason Solution Related Issue Example
Expected identifier Reserved words such as default are used in your code or in third party packages Use es3ify or es3ify-loader to transform your code #1 Fetch IE8
Exception thrown and not caught Babel transforms your export * from 'xxx' to Object.defineProperty which doesn't support accessor property in IE8 Insert require('es5-shim') require('es5-shim/es5-sham') in the top of your entry file, and DONOT use export * from 'xxx' in your code #2 #32 Hello World
Object expected Perhaps you are using fetch without polyfilled Use es6-promise and fetch-ie8 to polyfill fetch #4 Fetch IE8
'Promise' is undefined Promise need to be polyfilled in IE8 Use es6-promise to polyfill Promise #5 Fetch IE8
Object doesn't support this property or method Perhaps you are using Object.assign Use core-js to polyfill #7 Object Assign
'JSON' is undefined Need to use IE8 Standards Mode Add <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/> #8 Hello World

If you have other problems, please Open an issue.

Troubleshooting

Troubleshooting in issues

Reference

使你的 React 应用兼容 IE8

一个令人失望的消息：从 React v15 开始，React DOM 将不会再支持 IE8 了。而**还有超过 18% 的人在使用 IE8。

无论如何，react-ie8 仍会提供一系列的示例，还会收集 issues，以便于给遇到兼容性问题的人一个参考。

快去查看 react-ie8 示例吧，也欢迎提交 issue。

如何兼容 IE8

首先，你不应该使用 React v15 或更高版本。使用仍然支持 IE8 的 React v0.14 即可。

如果你需要查看 React v0.14 的文档，请访问：http://react-ie8.xcatliu.com

使用 CommonJS

强烈推荐使用 CommonJS 风格来引入需要的模块。

首先安装这些模块：

npm install --save es5-shim console-polyfill

然后把以下代码插入到入口文件最前面：

require('es5-shim');
require('es5-shim/es5-sham');
require('console-polyfill');

参考一个真实的例子：React IE8 Hello World Example。

使用 React Static Boilerplate

React Static Boilerplate 一个创建好的支持 IE8 的 React 静态模板，可以查看演示

其他问题

一些问题其实并不是 React 的问题，不过我也把他们列出来了：

错误信息 原因 解决方案 相关 Issue 示例
Expected identifier 代码中或者第三方模块中使用了保留字，比如 default 使用 es3ify 或者 es3ify-loader #1 Fetch IE8
Exception thrown and not caught babel 把 export * from 'xxx' 编译成了 Object.defineProperty，而 IE8 中不支持 accessor property 把 require('es5-shim') require('es5-shim/es5-sham') 插入到入口文件的最上方，并且在代码中不要使用 export * from 'xxx' #2 #32 Hello World
Object expected 可能你使用了 fetch 用 es6-promise 和 fetch-ie8 polyfill #4 Fetch IE8
'Promise' is undefined Promise 需要 polyfill 用 es6-promise polyfill #5 Fetch IE8
Object doesn't support this property or method 可能你使用了 Object.assign 用 core-js polyfill #7 Object Assign
'JSON' is undefined 需要使用 IE8 Standards Mode 添加 <!DOCTYPE html> 和 <meta http-equiv="X-UA-Compatible" content="IE=EDGE"/> #8 Hello World

如果你遇到了其他问题，可以提交一个 issue。

Troubleshooting

Troubleshooting in issues

参考