Hot Webpack with `react-refresh-webpack-plugin` and `react-refresh` not working.

[dakotalightning]

I'm working with typescript and webpack. Any component wrapped in WDYR will not refresh.

I did notice if you wrap a component whyDidYouRender it will reload.

import React from 'react';

// will work
const SomeComponent = () => (
  <div>
    Hello
  </div>
)

SomeComponent.whyDidYouRender = true
const SomeComponentWrap: React.FC = (props) => (<SomeComponent {...props} />)
export default SomeComponentWrap;

...

// will not work
const SomeComponent = () => (
  <div>
    Hello
  </div>
)

SomeComponent.whyDidYouRender = true
export default SomeComponent;

  "@babel/core": "^7.17.5",
  "@babel/plugin-proposal-class-properties": "^7.16.7",
  "@babel/plugin-proposal-decorators": "^7.17.2",
  "@babel/preset-env": "^7.16.11",
  "@babel/preset-react": "^7.16.7",
  "@babel/preset-typescript": "^7.16.7",
  "babel-loader": "^8.2.3",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
  "webpack": "^5.65.0",
  "webpack-cli": "^4.9.2",
  "@pmmmwh/react-refresh-webpack-plugin": "^0.5.4",
  "@welldone-software/why-did-you-render": "^6.2.3",
  "react-refresh": "^0.11.0",
  "webpack-dev-server": "^4.7.4",

webpack.config.js

const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const DEV_MODE = process.env.NODE_ENV !== 'production'
const plugins = [
];

if (DEV_MODE) {
  plugins.push(new ReactRefreshWebpackPlugin());
}

module.exports = {
  mode: DEV_MODE ? 'development' : 'production',

  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_module/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
              babelrc: false,
              presets: [
                [
                  "@babel/preset-env",
                  { targets: { browsers: "last 2 versions" } } // or whatever your project requires
                ],
                "@babel/preset-typescript",
                [
                  "@babel/preset-react",
                  {
                    runtime: 'automatic',
                    useBuiltIns: true,
                    development: process.env.NODE_ENV === 'development',
                    importSource: '@welldone-software/why-did-you-render',
                  }
                ]
              ],
              plugins: [
                // plugin-proposal-decorators is only needed if you're using experimental decorators in TypeScript
                ["@babel/plugin-proposal-decorators", { legacy: true }],
                ["@babel/plugin-proposal-class-properties", { loose: true }],
                ["@babel/plugin-proposal-private-methods", { loose: true }],
                ["@babel/plugin-proposal-private-property-in-object", { loose: true }],
                DEV_MODE && 'react-refresh/babel',
              ].filter(Boolean),
            },
          },
        ]
      },
      
    ],
  },

  plugins,

};

entry.tsx

import React from 'react'
import { render } from 'react-dom';

import './wdyr'.       // <= Placement or order doesn't make a difference.

import ConectedApp from './components/ConectedApp';

const App = (): React.ReactElement => {
  const reactComponent = (
    <React.StrictMode>
      <ErrorBoundary>
        <ConectedApp />
      </ErrorBoundary>
    </React.StrictMode>
  );

  return reactComponent;
};

const renderApp = (): void => {
  const el = document.getElementById('root');
  render(App(), el);
};

window.onload = () => renderApp();

wdyr.ts

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

if (process.env.NODE_ENV === 'development') {
  whyDidYouRender(React, {
    trackAllPureComponents: true,
    logOnDifferentValues: true,
    collapseGroups: true,
    trackHooks: true,
  });
}

These may be related. https://github.com/welldone-software/why-did-you-render/issues/224 https://github.com/welldone-software/why-did-you-render/issues/201

[oscarvz]

Try this in wdyr.ts:

/// <reference types="@welldone-software/why-did-you-render" />

import React from "react";

if (process.env.NODE_ENV === 'development') {
  const whyDidYouRender = require("@welldone-software/why-did-you-render");

  whyDidYouRender(React, {
    trackAllPureComponents: true,
    logOnDifferentValues: true,
    collapseGroups: true,
    trackHooks: true,
  });
}

[dakotalightning]

Try this in wdyr.ts:

/// <reference types="@welldone-software/why-did-you-render" />

 ...

Thanks. I've tried a few variations. Still nothing.