How to use in CRA(5.0.0) React17.0.1

I tried a lot of ways，but it dosen’t show any information in console. I don’t know what’s wrong.

import { times } from "lodash";
import React from "react";
import ReactDOM from "react-dom";
import whyDidYouRender from "@welldone-software/why-did-you-render";

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require('@welldone-software/why-did-you-render');
  whyDidYouRender(React, {
    trackAllPureComponents: true,
  });
}

class BigListPureComponent extends React.PureComponent {
  static whyDidYouRender = true;
  render() {
    console.log(
      "BigListPureComponent Re-Render! - We don't want to get here too often."
    );
    return (
      <div style={this.props.style}>
        <h2>BigListPureComponent</h2>
        <div>
          {times(3000).map((n) => (
            <div key={n}>Element #{n}</div>
          ))}
        </div>
      </div>
    );
  }
}

const bigListStyle = { width: "100%" }; // eslint-disable-line no-unused-vars

// Notice, that unlike the huge list, we don't track Main's re-renders because we don't care about it's re-renders.
class Main extends React.Component {
  state = { count: 0 };
  render() {
    return (
      <div
        style={{
          height: "100%",
          width: "100%",
          display: "flex",
          flexDirection: "column"
        }}
      >
        <h1>Big List (Main Demo)</h1>
        <p>
          {
            'Open the console and notice how the heavy list re-renders on every click on "Increase!" even though it\'s props are the same.'
          }
        </p>
        <div>
          <button
            onClick={() => {
              this.setState({ count: this.state.count + 1 });
            }}
          >
            Increase!
          </button>
        </div>
        <div>
          <span>Count: {this.state.count}</span>
        </div>
        <BigListPureComponent style={{ width: "100%" }} />
        <BigListPureComponent />
      </div>
    );
  }
}

ReactDOM.render(<Main />, document.getElementById("root"));

[vzaidman]

The discussion on CRA 4 is here: #154. I’ll try to look at CRA 5 this week.

[LyulyaevMaxim]

This works for react-scripts@5.0.0, react-app-rewired@2.2.1, and customize-cra@1.0.0. Probably, If you use another way of modifying CRA then the logic of changing ‘babel-preset-react-app’ is identical.

//config-overrides.js
const isDev = process.env.NODE_ENV === 'development'

module.exports = CRA.override(
  isDev && enableWhyDidYouRender,
)

function enableWhyDidYouRender(config) {
  const options = CRA.getBabelLoader(config).options,
    babelPresetReact = options.presets.find(preset => preset[0].includes('babel-preset-react-app'))

  if (babelPresetReact) {
    const settingsOfBabelPresetReact = babelPresetReact[1]
    settingsOfBabelPresetReact.development = true
    settingsOfBabelPresetReact.importSource = '@welldone-software/why-did-you-render'
  }

  return config
}

//index.tsx
import React from 'react'
import { render } from 'react-dom'
import { enableWhyDidYouRender } from './configs/why-did-you-render'

enableWhyDidYouRender(React)

function AppRoot() { return <div /> }

render(<AppRoot />, document.getElementById('root'))

//why-did-you-render.ts
import React from 'react'
import whyDidYouRender from '@welldone-software/why-did-you-render'

export function enableWhyDidYouRender(react: typeof React) {
  if (process.env.NODE_ENV !== 'development') return
  whyDidYouRender(react, {
    include: [],
    exclude: [],
    trackAllPureComponents: true,
    trackHooks: true,
    logOwnerReasons: true,
    logOnDifferentValues: false,
    collapseGroups: true,
  })
}