时间戳

首页 > 解决方案 > 不支持反应分析

javascript - 不支持反应分析

问题描述

Chrome React 开发工具的配置文件选项卡对我说“不支持反应分析”。\n 但是，我的 webpack.config.prod.js 已设置。\n

我遵循了“ https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977 ”中的所有描述。什么我忘记了网站描述中的任何内容？

我的 Chrome 开发工具显示图像\n

-> 我的 webpack 配置。

var buildConfig = merge(baseConfig, {
  optimization: {
    minimize: true
  },
  resolve: {
    extensions: [".js", ".css"],
    alias: {
      styles: path.join(__dirname, ""),
      "react-dom$": "react-dom/profiling",
      "scheduler/tracing": "scheduler/tracing-profiling"
    }
  },

这是我的应用程序。

import * as React from "react";
import { Profiler } from "react";

const logProfile = (
  id: string,
  phase: "mount" | "update",
  actualDuration: number,
  baseDuration: number,
  startTime: number,
  commitTime: number,
  interactions: Set<any>
) => {
  console.log("Profiling ID", id);
  console.log("Profiling phase", phase);
  console.log("Profiling actualDuration", actualDuration);
  console.log("Profiling baseDuration", baseDuration);
  console.log("Profiling startTime", startTime);
  console.log("Profiling commitTime", commitTime);
  console.log("Profiling interactions", interactions);
};
class TeacherConfig extends React.Component {
  render() {
    return (
      <>
        <Profiler id="application" onRender={logProfile}>
          <div id="preload_hidden">
            <span>abcd</span>
            <span style={{ fontWeight: "bold" }}>abcd</span>
            <span className="set" /> <span className="unlimit" />{" "}
            <span className="start" />
            <span className="time1" />
            <span className="time2" /> <span className="time3" />
          </div>
          <Navigations />
        </Profiler>
      </>
    );
  }
}

这是我的 package.json 的一部分。

 "dependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.5.0",
    "react-draggable": "^3.0.5",
    "react-hot-loader": "^4.3.11",
    "react-id-swiper": "^1.6.8",
    "react-resize-detector": "^3.4.0",
    "sass-loader": "^7.1.0",
    "scheduler": "^0.10.0"
}

标签： javascriptreactjstypescriptreact-native

解决方案

请检查 React 是否从 CDN 加载。一些说明将 React 包含在 html 中作为<script>

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html#write-some-code

删除它们，并externals从 webpack 中删除该部分，或者将它们更改为使用分析器或 CDN 的开发版本。

权衡是因为 React 如此受欢迎，可能另一个站点从 CDN 加载主文件，因此它已经被缓存了。但是如果你需要它来进行开发定制，你的捆绑器看不到 React 或 React-Dom。

推荐阅读