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

问题描述 投票:0回答:8

我的 IE 11 和 React 应用程序有问题。我使用 Webpack、babel 和 polyfill.io cdn,一切都很好,直到渲染捆绑文件,然后它停止执行任何操作。 您知道可能会出现什么问题吗?

javascript reactjs internet-explorer polyfills
8个回答
46
投票

React 无法立即与 IE 兼容,

来自官方文档:

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

我们不支持不支持 ES5 方法的旧版浏览器,但是 如果使用polyfills,你可能会发现你的应用程序可以在旧版浏览器中运行 例如 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"
]

更多信息来自官方网站


14
投票

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

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

    import 'react-app-polyfill/ie9';
    import 'react-app-polyfill/ie11';
    import 'react-app-polyfill/stable';
  1. 编辑 Package.json 文件并在浏览器列表的开发部分添加“ie 11”。默认的生产列表非常慷慨,并且确实包括 ie 11 已经通过 >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. 删除整个node_modules文件夹

  3. 运行 npm install 重新安装node_modules

  4. 再次运行 npm start


13
投票

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

如果react-app-polyfill不适合你,请尝试core-js。

$ npm install core-js

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

import 'core-js/stable'

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

对我来说,这个问题仅在生产版本(react build)中得到解决


8
投票

react-app-polyfills
仅适用于生产环境,不适用于开发环境。构建、部署然后测试它。


2
投票

如果你在你的reducer中使用Object.assign()(例如)或者IE11不支持polyfilling的其他一些函数,你就会遇到这个问题。


2
投票

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

我完全按照

@Treycos
@Kurisubo
的建议做了,但没有解决;为了解决这个问题,必须将我的功能组件中的 es6 箭头函数替换为旧式声明式样式,并在 IE 11 和 iOS 9.3.2 上加载页面

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

在此添加此内容,以便将来有人受益。


1
投票

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

首先:确保将它们导入到“index.js”文件中(带有“ReactDOM.render(...)”的文件。

第二:确保将其导入到代码的顶部。上面的“从'react'导入React。”


-1
投票

地球上没有任何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 样式,还有对象等。所以我确保我只向它发送真实的样式,然后一切又开始工作:)

© www.soinside.com 2019 - 2024. All rights reserved.