react Profiling not supported

Question

Chrome React Dev Tool's Profile Tab Said to me "react Profiling not supported".\n But, I'm Set at my webpack.config.prod.js.\n

Im followd all description in 'https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977'. What of I'm forget anything there site description?

My Chrome Dev Tool Said Image\n

-> my webpack config.

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"
    }
  },

This is My App.

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>
      </>
    );
  }
}

This is part of my 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"
}

Answer 1

Check if React loads from the CDN please. Some instructions have the React include in the html as a <script>

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

Remove them, and remove the externals section from webpack, or change them to use profiler or development versions of the CDN.

Trade off is since React is so popular, likely another site loads the main files from a CDN so it's already cache. But if you need it for development customization, your bundler doesn't see React or React-Dom.