升级到 React 17 后，应用程序无法在某些平台上加载答案

【问题标题】：App fails to load on some platforms after upgrade to React 17升级到 React 17 后，应用程序无法在某些平台上加载
【发布时间】：2021-04-16 09:39:51
【问题描述】：

升级到 React 17 后，应用无法在某些平台上加载。例如，它在现代 Chrome 中仍然运行良好，但在旧浏览器中失败。应用入口文件中的ReactDOM.render函数失败，报错如下：

错误：缩小的 React 错误 #31；访问 https://reactjs.org/docs/error-decoder.html?invariant=31&args[]=object%20wi…ys%20%7B%24%24typeof%2C%20type%2C%20key%2C%20ref%2C%20props%2C%20_owner%7D 获取完整消息或使用非缩小开发环境获取完整信息错误和其他有用的警告。

去那里提供了这些额外的信息：

你刚才遇到的错误全文是：对象作为 React 子对象无效（找到：带键的对象 {$$typeof, type, key, ref, props, _owner}）。如果你打算渲染一个孩子的集合，请改用数组。

【问题讨论】：

标签： reactjs webpack loading react-dom core-js

【解决方案1】：

事实证明，在那些依赖 core-js 进行 polyfill 的平台上加载会失败。脚本加载顺序搞乱了，导致core-js没有先加载，虽然入口文件是先导入的。可能是由于可以自动导入 React 的新方式，现在在应用程序中使用了一项功能：

presets: [
    '@prefix/babel-preset-libx',
    [
      '@babel/preset-react',
      {
        runtime: 'automatic'
      }
    ]
  ],

检查导致错误的JS对象显示：

铬：

$$typeof: Symbol(react.element)
key: null
props: {children: "TEST"}
ref: null
type: "div"
_owner: null

失败的平台：

$$typeof: 60103
key: null
props: Object
ref: null
type: "div"
_owner: null

似乎与这个问题有关：https://github.com/facebook/react/issues/8379，以及这个 SO 问题：Objects are not valid as a react child (In Internet explorer 11 for React 15.4.1)。

和那些一样，解决方案是在 webpack.config.js 中指定脚本加载顺序：

entry: [
 'core-js', // Should be loaded first
 // If applicable: 'react-hot-loader', // This package requires/loads react (but not react-dom).
 'react', // Include this to enforce order
 'react-dom', // Include this to enforce order
 './client.js' // Path to your app's entry file
]

https://stackoverflow.com/users/4757672/fran%c3%a7ois-maturel 在https://stackoverflow.com/a/40928047/1158376 中的解决方案的功劳

【讨论】：