踩坑

使用 CDN 外链引入生产模式的 react 和 react-dom：


html
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" defer integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" defer integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

然后开发时出现报错：


cmd
TypeError: Cannot read property 'setExtraStackFrame' of undefined

并白屏。

解决

在这个 issue 的提示下，原因是在开发环境使用了生产环境的包。遂使用 html-webpack-plugin 插件进行按环境引入。

在 webpack 配置中：


js
{
  //...
  plugins: [
    // ...
    new HtmlWebpackPlugin(
      Object.assign(
        {},
        {
          inject: true,
          template: paths.appHtml, // 项目的 index.html 文件
          isProd: process.env.NODE_ENV === 'production'
        },
      )
    )
  ],
  externals: {
    // ..
    'react': 'React',
    'react-dom': 'ReactDOM',
  }
}

使用 html-webpack-plugin 插件，配置inject: true和isProd: process.env.NODE_ENV === 'production'。这样子就可以对 html 文件进行注入了。

在项目的 index.html 文件：


html
<head>
  <% if (htmlWebpackPlugin.options.isProd) {%>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" defer integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" defer integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <% } else {%>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.development.min.js" integrity="sha512-6i4FxVh0YbXCtxtqrFlG0H6FJRO4YQ5fyFH0JBdAAiqCt6/Q+jHMabMSC8FpESVSJZvnQ52dB2A8OD9SMk7buw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.development.min.js" integrity="sha512-I5GJQRKGdj2miDs8ComgARfiAQiZJo/43YasH22qtweoG+YRXLTDYegxC/vPgw/ERxRzww/F4l4+8UiMmI20sw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <% } %>
</head>

根据isProd确定导入生产环境还是开发环境的 react。

此外，很显然，我们也可以只在生产环境使用 CDN 引入，开发环境用本地文件就行了。

React 报错 TypeError: Cannot read property 'setExtraStackFrame' of undefined

踩坑

解决