时间戳

首页 > 解决方案 > React 和 core-js 不能为 IE10 填充

reactjs - React 和 core-js 不能为 IE10 填充

问题描述

问题

出于某种原因，我的 React 应用程序在发布到公司的 DNS 时以文档模式 IE 10 作为标准运行。奇怪的管理设置，我无法控制。

无论如何，需要对 IE 10 的支持。在 IE 11 中它运行良好，使用建议的react-app-polyfills：

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

然后，尝试使用ie9而不是ie11. 没有成功，应用程序崩溃了。填充物不起作用吗？我有很多错误消息，例如：

Unhandled promise rejection Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
   "Unhandled promise rejection"
   {
      [functions]: ,
      description: "Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.",
      message: "Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.",
      name: "Error",
      stack: "Error: Minified React error #31; visit https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%7D&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
   at _o (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:559477)
   at Anonymous function (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:564365)
   at Ra (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:573836)
   at gs (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:614144)
   at cu (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:604884)
   at su (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:604812)
   at Zs (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:601824)
   at Anonymous function (https://the-company's-domain.com/static/js/2.517170ee.chunk.js:2:553207)
   at t.unsta",
      Symbol()_a.ycgs6yczz5z: undefined,
      Symbol()_m.ycgs6yczz5z: undefined,
      Symbol(extensions)_16.ycgs6yczzi: undefined,
      Symbol(foo)_1a.ycgs6yczzi: undefined,
      Symbol(foo)_17.ycgs6yczzi: undefined,
      Symbol(foo)_18.ycgs6yczzi: undefined,
      Symbol(foo)_19.ycgs6yczzi: undefined,
      Symbol(meta)_2.ycgs6yczz8v: { },
      Symbol(nodejs.util.inspect.custom)_15.ycgs6yczzi: undefined,
      Symbol(react.async_mode)_11.ycgs6yczzi: undefined,
      Symbol(react.block)_10.ycgs6yczzi: undefined,
      Symbol(react.concurrent_mode)_y.ycgs6yczziy: undefined,
      Symbol(react.context)_t.ycgs6yczz5z: undefined,
      Symbol(react.element)_n.ycgs6yczz5z: undefined,
      Symbol(react.forward_ref)_u.ycgs6yczz5z: undefined,
      Symbol(react.fragment)_p.ycgs6yczz5z: undefined,
      Symbol(react.fundamental)_12.ycgs6yczzi: undefined,
      Symbol(react.lazy)_x.ycgs6yczziy: undefined,
      Symbol(react.memo)_w.ycgs6yczziy: undefined,
      Symbol(react.portal)_o.ycgs6yczz5z: undefined,
      Symbol(react.profiler)_r.ycgs6yczz5z: undefined,
      Symbol(react.provider)_s.ycgs6yczz5z: undefined,
      Symbol(react.responder)_13.ycgs6yczzi: undefined,
      Symbol(react.scope)_14.ycgs6yczzi: undefined,
      Symbol(react.strict_mode)_q.ycgs6yczz5z: undefined,
      Symbol(react.suspense)_v.ycgs6yczz5z: undefined,
      Symbol(react.suspense_list)_z.ycgs6yczziy: undefined
   }

很难理解缩小的捆绑包，因为我只能在现场复制这个问题，而不是在开发中（某些依赖create-react-app项不适用于 polyfill + hot-reload）。这个链接https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20with%20keys%20%7B%7D&args[]=导致了这个：

Objects are not valid as a React child (found: object with keys {}). If you meant to render a collection of children, use an array instead.

这让我相信这与...上的不成功 polyfill 有关。Object（我错了，请阅读下面的答案）

标签： reactjsinternet-explorerbabeljspolyfills

解决方案

解决方案

8 小时后……（谢天谢地，我得到了报酬）

事实证明，Object 上的 polyfill 向对象添加了一个元素，当我迭代它时，它完全弄乱了我的代码，就像这样......

Object.entries(queryData.data.time).map((day) => {
... did stuff

奇怪的东西，在 IE11 或任何其他浏览器中都没有问题。

带走

显然，一些 polyfill__proto__向对象添加了一个元素。意识到！

推荐阅读