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

inb24sb2  于 2022-12-28  发布在  Java
关注(0)|答案(8)|浏览(147)

我有一个IE 11和我的React应用程序的问题。我使用Webpack,babel和polyfill.io cdn和一切都很好,直到渲染捆绑文件,然后它停止做任何事情。你有任何想法可能会出错吗?

n7taea2i

n7taea2i1#

React并不能立即与IE兼容,
从官方文件来看:
React支持所有流行的浏览器,包括Internet Explorer 9和更高版本,但旧版本的浏览器(如IE 9和IE 10)需要一些多边形填充。
我们不支持不支持ES5方法的旧版浏览器,但如果页面中包含了es5-shim和es5-sham等多边形填充,您可能会发现您的应用在旧版浏览器中也可以正常工作。
要使您的应用程序在IE(11或9)上运行,您必须安装React-app-polyfill:
https://www.npmjs.com/package/react-app-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支持。
浏览器9

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

// ...

浏览器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"
]

有关official site的更多信息

8ljdwjyq

8ljdwjyq2#

react-app-polyfill软件包将有助于react app在ie9和ie11中的运行,它将在开发和生产环境中运行。
请按照步骤1.编辑index.js文件并在文件的最顶部添加以下行。

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

1.编辑Package.json文件并在browserslist的development部分添加“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"
]

}
1.删除整个node_modules文件夹
1.运行npm install以重新安装node_modules
1.运行npm开始再次运行

oxosxuxt

oxosxuxt3#

对于其他偶然发现这个问题的人来说,
如果react-app-polyfill不适合你,试试core-js。

$ npm install core-js

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

import 'core-js/stable'

此外,在开发过程中,您可能看不到修复。
对我来说,这个问题只在生产版本中得到了解决(react build)

xv8emn3q

xv8emn3q4#

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

f0brbegy

f0brbegy5#

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

goqiplq2

goqiplq26#

我尝试了上面提供的解决方案,但仍然无法让页面在IE11上工作,也不能在我的旧iOS 9.3.2...
我完全按照@Treycos@Kurisubo的建议做了,但没有解决方案;为了解决这个问题,我不得不将es6 arrow函数从我的功能组件替换为老派的声明式样式,并在IE 11和iOS 9.3.2上加载页面

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

把这个加在这里,这样以后就有人能受益了。

oalqel3c

oalqel3c7#

对于尝试使用“react-app-polyfill/xxx”但未成功的患者。
首先:确保将它们导入到您的“index.js”文件(带有“ReactDOM.render(...)”的文件)中<React.StrictMode>。
第二:确保在代码的顶部导入它,在“从'react'导入React”上面。

xj3cbfub

xj3cbfub8#

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

相关问题