Question

我对IE 11和我的React应用有问题。我使用Webpack，babel和polyfill.io cdn，在渲染捆绑文件之前一切都很好，然后它将停止执行任何操作。您知道什么地方可能出问题吗？

谢谢。

Answer 1

package react-app-polyfill软件包将有助于在ie9＆ie11中工作react app。这将在开发和生产环境中都起作用。

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

where date = '15/05/20'

编辑Package.json文件，并在浏览器列表的开发部分中添加“ ie 11”。默认的产品列表非常大，确实包含了11个，通过> 0.2％
```
    import 'react-app-polyfill/ie9';
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';
```
}
删除整个node_modules文件夹
运行npm install重新安装node_modules
运行npm开始再次运行

Answer 2

反应可能无法立即与IE兼容，

摘自官方文档：

React支持所有流行的浏览器，包括Internet Explorer 9及更高版本，尽管IE 9和IE 10等较旧的浏览器需要某些填充。

我们不支持不支持ES5方法的旧版浏览器，但是如果使用polyfill，您可能会发现您的应用程序可以在旧版浏览器中运行页面中包含诸如es5-shim和es5-sham之类的内容。你在你的如果您选择走这条路，那就拥有它。

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

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

功能：

每个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])

用法

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

npm install react-app-polyfill

现在，您可以导入要支持的最低版本的入口点。例如，如果导入IE9入口点，则其中将包括IE10和IE11支持。

Internet Explorer 9

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

// ...

Internet Explorer 11

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

// ...

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

示例：

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

Answer 3

react-app-polyfills仅在生产环境中为我工作，而在开发人员中则没有。构建，部署然后进行测试。

Answer 4

尝试以下方法必须解决该问题：-

第一步：- 首先安装软件包：-

jmeter -n -t ${WORKSPACE}/bin/test/${testscript}.jmx -l ./bin/test/result/${testscript}.jtl -Jhost=${host} -Jthreads=${env.THREADS} -Jiterations=${env.ITERATIONS} -Jrampup=${env.RAMPUP} -Jbuildnumber=${env.BUILD_NUMBER}"

步骤2：-在您的 index.js 文件顶部添加以下命令：-

npm install react-app-polyfill

or

yarn add react-app-polyfill

第3步：-在package.json文件中，将浏览器列表部分替换为以下内容：-

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

步骤4：-删除节点模块package.lock.json，yarn.lock，然后运行以下命令：-

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

Answer 5

如果您在减速器（例如）中使用Object.assign（）或IE11在不进行填充的情况下不支持的其他功能，则会出现此问题。

Answer 6

对于那些尝试使用“react-app-polyfill/xxx”但没有成功的人。

首先：确保在您的“index.js”文件（带有“ReactDOM.render(...)”的文件）中导入它们。

第二：确保在代码顶部导入它。在“从 'react' 导入 React”上方。

Answer 7

对于偶然发现此问题的其他人，

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

async$

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

$ npm install core-js

在开发过程中，您可能也看不到该修补程序。

对我来说，该问题仅在生产版本（实际版本）中得以解决

Answer 8

我尝试了上面提供的解决方案，但仍然无法在IE11上运行页面，也无法在旧的iOS 9.3.2中运行页面...

我的行为完全符合@Treycos和@Kurisubo的建议，但没有解决方法；要解决，必须将功能组件中的es6箭头功能替换为老式的声明式样式，并在IE 11和iOS 9.3.2上加载页面

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

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

Answer 9

地球上没有任何polyfill似乎有帮助，所以我调试了很长时间，终于从React开发人员的“错误”中找出了问题（仅在IE11开发工具中可见）：

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

哪个：

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

唯一的是，我不小心将其他的东西不仅发送给css样式，还发送了Objects等。因此，我确保只向其发送真实的样式，然后一切又开始工作了：）

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

9 个答案: