我的 IE 11 和 React 应用程序有问题。我使用 Webpack、babel 和 polyfill.io cdn,一切都很好,直到渲染捆绑文件,然后它停止执行任何操作。 您知道可能会出现什么问题吗?
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"
]
更多信息来自官方网站
react-app-polyfill 包将有助于在 ie9 和 ie11 中运行 React 应用程序。这在开发和生产环境中都适用。
请按照步骤操作 1. 编辑index.js 文件并在文件的最顶部添加以下行。
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';
编辑 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"
]
}
删除整个node_modules文件夹
运行 npm install 重新安装node_modules
再次运行 npm start
对于任何其他偶然发现这个问题的人,
如果react-app-polyfill不适合你,请尝试core-js。
$ npm install core-js
确保这是 src/index.js 文件中的第一行:
import 'core-js/stable'
此外,在开发过程中您可能看不到修复。
对我来说,这个问题仅在生产版本(react build)中得到解决
react-app-polyfills
仅适用于生产环境,不适用于开发环境。构建、部署然后测试它。
如果你在你的reducer中使用Object.assign()(例如)或者IE11不支持polyfilling的其他一些函数,你就会遇到这个问题。
我尝试了上面提供的解决方案,但仍然无法让页面在 IE11 或我的旧 iOS 9.3.2 上运行...
我完全按照
@Treycos
和@Kurisubo
的建议做了,但没有解决;为了解决这个问题,必须将我的功能组件中的 es6 箭头函数替换为旧式声明式样式,并在 IE 11 和 iOS 9.3.2 上加载页面
注意:该功能组件是第一个在页面上呈现的组件
在此添加此内容,以便将来有人受益。
对于那些尝试使用“react-app-polyfill/xxx”但未成功的人。
首先:确保将它们导入到“index.js”文件中(带有“ReactDOM.render(
第二:确保将其导入到代码的顶部。上面的“从'react'导入React。”
地球上没有任何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 样式,还有对象等。所以我确保我只向它发送真实的样式,然后一切又开始工作:)