Make your React app work in IE8

August 29, 2017 · View on GitHub

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][Discontinuing IE 8 Support in React DOM]. There are still [more than 18% people who are using IE8 in China][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][Hello World] for a real example.

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][#2] [#32][#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]

使你的 React 应用兼容 IE8

一个令人失望的消息：[从 React v15 开始，React DOM 将不会再支持 IE8 了][Discontinuing IE 8 Support in React DOM]。而[中国还有超过 18% 的人在使用 IE8][IE8-in-China]。

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

快去查看 react-ie8 [示例][Examples]吧，也欢迎[提交 issue][Open an 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][Hello World]。

使用 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][#2] [#32][#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][Open an issue]。