Javascript 为什么IE 11显示空白页面渲染反应应用程序

Why IE 11 display blank page rendering react app

提问by itgirl1234

I have an issue with IE 11 and my react app. I use Webpack, babel and polyfill.io cdn and all is nice until rendering bundeled file, then it stops doing anything. Do you have any idea what may go wrong?

我的 IE 11 和我的 React 应用程序有问题。我使用 Webpack、babel 和 polyfill.io cdn，一切都很好，直到渲染捆绑文件，然后它停止做任何事情。你知道可能会出什么问题吗？

Thanks in advance.

提前致谢。

回答by Treycos

React is not compatible right away with IE,

React 不立即与 IE 兼容，

From the official documentation :

从官方文档：

React supports all popular browsers, including Internet Explorer 9 and above, although some polyfills are required for older browsers such as IE 9 and IE 10.

React 支持所有流行的浏览器，包括 Internet Explorer 9 及更高版本，尽管旧版浏览器（例如 IE 9 和 IE 10）需要一些 polyfill。

We don't support older browsers that don't support ES5 methods, but you may find that your apps do work in older browsers if polyfills such as es5-shim and es5-sham are included in the page. You're on your own if you choose to take this path.

我们不支持不支持 ES5 方法的旧浏览器，但如果页面中包含诸如 es5-shim 和 es5-sham 之类的 polyfill，您可能会发现您的应用程序确实可以在旧浏览器中运行。如果你选择走这条路，你就靠自己了。

---

---

To make your application work on IE (11 or 9) you will have to install React-app-polyfill :

要使您的应用程序在 IE（11 或 9）上运行，您必须安装 React-app-polyfill ：

https://www.npmjs.com/package/react-app-polyfill

https://www.npmjs.com/package/react-app-polyfill

Features :

特征 ：

Each polyfill ensures the following language features are present:

每个 polyfill 确保存在以下语言功能：

Promise (for async / await support)
window.fetch (a Promise-based way to make web requests in the browser)
Object.assign (a helper required for Object Spread, i.e. { ...a, ...b })
Symbol (a built-in object used by for...of syntax and friends)
Array.from (a built-in static method used by array spread, i.e. [...arr])

Usage

用法

First, install the package using Yarn or npm:

首先，使用 Yarn 或 npm 安装包：

npm install react-app-polyfill

Now, you can import the entry point for the minimal version you intend to support. For example, if you import the IE9 entry point, this will include IE10 and IE11 support.

现在，您可以导入您打算支持的最小版本的入口点。例如，如果您导入 IE9 入口点，这将包括 IE10 和 IE11 支持。

Internet Explorer 9

浏览器 9

// This must be the first line in src/index.js
import 'react-app-polyfill/ie9';

// ...

Internet Explorer 11

浏览器 11

// This must be the first line in src/index.js
import 'react-app-polyfill/ie11';

// ...

---

---

You can also configure your manifest to handle different browsers, using the following doc : https://github.com/browserslist/browserslist

您还可以使用以下文档配置您的清单以处理不同的浏览器：https: //github.com/browserslist/browserslist

example :

例子 ：

"browserslist": [
    ">0.2%",
    "not dead",
    "ie >= 9"
]

---

---

More information from the official site

来自官方网站的更多信息

回答by Kurisubo

For anybody else who stumbles upon this problem,

对于偶然发现这个问题的任何其他人，

If react-app-polyfill doesn't work for you, try core-js instead.

如果 react-app-polyfill 对您不起作用，请尝试使用 core-js。

$ npm install core-js

Make sure this is the first line in your src/index.js file:

确保这是 src/index.js 文件中的第一行：

import 'core-js/stable'

Also you might not see the fix when you are in development.

此外，您在开发过程中可能看不到修复程序。

For me the issue was solved only in the production version (react build)

对我来说，这个问题只在生产版本中得到解决（react build）

回答by Konstantin Zlatkov

react-app-polyfillsworks for me only in production, not in dev. Build, deploy and then test it.

react-app-polyfills只在生产中对我有用，在开发中不适用。构建、部署然后测试它。

回答by Vjeko Babic

If you are using Object.assign() in your reducer (for example) or some other functions that IE11 doesn't support without polyfilling you would have this problem.

如果您在减速器中使用 Object.assign()（例如）或 IE11 不支持的其他一些功能，而无需 polyfill，您就会遇到这个问题。

回答by Akber Iqbal

I tried the solutions offered above but still couldn't get the page to work on IE11 nor in my old iOS 9.3.2...

我尝试了上面提供的解决方案，但仍然无法让页面在 IE11 或我的旧 iOS 9.3.2 上工作......

I did exactly as suggested by @Treycosand @Kurisubobut no resolution; to resolve, had to replace es6 arrow function from my functional component into old school declarative style and the page loaded on IE 11 and iOS 9.3.2

我完全按照建议的那样做@Treycos，@Kurisubo但没有解决方案；要解决，必须将我的功能组件中的 es6 箭头函数替换为旧式声明式样式，并在 IE 11 和 iOS 9.3.2 上加载页面

NOTE: this functional component was the first component which was rendered on the page

注意：这个功能组件是页面上呈现的第一个组件

Adding this here so that someone can benefit in the future.

在此处添加此内容，以便将来有人可以受益。

回答by OZZIE

Not any polyfill on earth seemed to help so I debugged for ages and finally figured out from a React developer "error" (only seen in IE11 dev. tools):

地球上没有任何 polyfill 似乎有帮助，所以我调试了很长时间，最后从 React 开发人员的“错误”中找出了答案（仅在 IE11 开发工具中看到）：

The above error occurred in the <h2> component:
in h2 (created by CMSHeading)
// ...

Which had:

其中有：

const {
  ...styles
} = this.props;
return (<h2 styles={styles}>...</h2>);

The only thing was that I was accidentally sending other stuff down that wasn't just css styles but Objects etc. So I made sure that I was only sending real styles to it and then everything started working again :)

唯一的事情是我不小心发送了其他东西，不仅仅是 css 样式，还有对象等。所以我确保我只向它发送真正的样式，然后一切又开始工作了:)

回答by Rayees Pk

The package react-app-polyfill will help to work react app in ie9 & ie11. This will work both in development and production environment.

包 react-app-polyfill 将有助于在 ie9 和 ie11 中运行 react app。这将适用于开发和生产环境。

Please follow the steps 1. Edit the index.js file and add the following lines at the very top of the file.

请按照步骤 1. 编辑 index.js 文件并在文件的最顶部添加以下几行。

    import 'react-app-polyfill/ie9';
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';

1. Edit the Package.json file and add "ie 11" in the development sections of the browserslist. The default prouduction list is quite generous and does include ie 11 already via the >0.2%

   "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version",
     "ie 11"
   ]
   

   }

2. delete your entire node_modules folder

3. run npm install to re-install the node_modules

4. run npm start to run again

2. 编辑 Package.json 文件并在浏览器列表的开发部分添加“即 11”。默认的生产列表非常慷慨，并且通过> 0.2％已经包括即11

   "browserslist": {
   "production": [
     ">0.2%",
     "not dead",
     "not op_mini all"
   ],
   "development": [
     "last 1 chrome version",
     "last 1 firefox version",
     "last 1 safari version",
     "ie 11"
   ]
   

   }

3. 删除整个 node_modules 文件夹

4. 运行 npm install 重新安装 node_modules

5. 运行 npm start 再次运行