<commit_before>[中文 README](#cn-make-your-react-app-work-in-ie8)

# 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:

```shell
npm install --save es5-shim console-polyfill
```

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

```js
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]<commit_msg>Update react-ie8.md<commit_after>[中文 README](#cn-make-your-react-app-work-in-ie8)

# 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:

```shell
npm install --save es5-shim console-polyfill
```

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

```js
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 风格来引入需要的模块。

首先安装这些模块：

```shell
npm install --save es5-shim console-polyfill
```

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

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

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

### 使用 React Static Boilerplate

[React Static Boilerplate](https://github.com/jun0205/react-static-boilerplate) 一个创建好的支持 IE8 的 React 静态模板，可以查看[演示](http://react-ie8.getfuli.com/)

### 其他问题

一些问题其实并不是 `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]。

## Troubleshooting

[Troubleshooting in issues][Troubleshooting]
{'fraction_non_alphanumeric': 0.14906120108929338, 'fraction_numerical': 0.023219148631216855, 'mean_word_length': 4.234808702175544, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 24, 'https://': 1, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4964505', 'n_tokens_mistral': 2625, 'n_tokens_neox': 2530, 'n_words': 852}