! THIS IS NOT YOUR COMPONENT !

[theKashey]

        ! THIS IS NOT YOUR COMPONENT !
        !  THIS IS REACT-HOT-LOADER  !

        And you are probably looking for a function component of yours
        It's hidden, but there is a way to fix this - just reconfigure your application a bit

You might see this in your code, especially if you clicked "Show Component Source" in the React Dev Tools.

You were looking for some component, and got ProxyFacade - that's how React-Hot-Loader works - it's wrapping everything with Proxies.

And you can fix it!

To fix this problem you need "react-🔥-patch", and there are tree ways how to apply it:

Webpack loader

Use a webpack-plugin to land a patch. That's the safest way.

// would only land a "hot-patch" to react-dom
{
    test: /\.js$/,
    include: /node_modules\/react-dom/,
    use: ['react-hot-loader/webpack']
},

hot-loader/react-dom alias

Use a hot-loader/react-dom with prelanded patch. See hot-loader repo for the instalation details.

// webpack.conf
...
resolve: {
    alias: {
      'react-dom': '@hot-loader/react-dom'
    }
}
...

hot-loader/react-dom yarn override

Just yarn add react-dom@npm:@hot-loader/react-dom, but only for yarn package manager.

[ivancarvalhofilho]

None of the mentioned fixes worked for me, what worked was changing the default react-hot-reload lib to another one such as webpack-hot-reload lib.
Ex:

// webpack.conf
module.exports = {
  ...
  entry: [
    "webpack/hot/dev-server.js", // <-- change to this
    ...
  ],
  output:{
    publicPath: '/' // <-- Webpack hot reload require this param to work properly 
  },
  devServer: {
    hot: true,
  },
 ...
}

(I was using React v17 and Router v6)

[r-vigneshwaran]

I am facing this issue and it is not working for me

[inspiraller]

Tried all of the above methods and still have same problem
See boilerplate repo I created.

None of the above solutions work for this repo:
https://github.com/inspiraller/webpack5_hotload

index.tsx

import React, { ComponentType } from "react";
import ReactDOM from "react-dom";
import { AppContainer } from "react-hot-loader";

import App, { Props as AppProps } from "src/App";

import './index.scss'
export interface RenderProps {
  App: ComponentType<AppProps>;
}

export type TRender = (props: RenderProps) => void;
export const render: TRender = ({  App }) => {
  ReactDOM.render(
    <AppContainer>
      <App />
    </AppContainer>,
    document.getElementById("root") || document.createElement("div")
  );
};
interface HotProps extends RenderProps {
  render: TRender;
}

type THot = (props: HotProps) => void;
const handleHotReload: THot = ({ render, App }) => {
  if (module && module.hot) {
    module.hot.accept("src/App", () => {
      return render({ App });
    });
  }
};

render({ App });
handleHotReload({ render, App });

export default {};

App.tsx

import React, { FC, useEffect } from "react";
import {
  Routes,
  Route,
  BrowserRouter as Router
} from "react-router-dom";


import { Home } from "./Pages";
import { Example } from "./Pages/Example";
import { TElement } from "./types";

export interface ConfigRoutes {
  [key: string]: {
    title: string,
    path: string,
    component: TElement
  }
}
export const configRoutes: ConfigRoutes = {
  home: {
    title: "Home",
    path: `/`,
    component: <Home />,
  },
  Example: {
    title: "Example",
    path: `/Example`,
    component: <Example />,
  },

};

export interface Props {

}
const App:FC<Props> = () => {
  const routes = configRoutes
  // const location = useLocation()
  const location = document.location;
  const { pathname } = location;
  useEffect(() => {
    if (pathname) {
      const keyRoute = Object.keys(routes).find(
        (item) => routes[item].path === pathname
      );
      if (keyRoute) {
        const title = routes[keyRoute].title;
        window.document.title = title;
      }
    }
  }, [pathname]);

  console.log('Router', {routes})
  return (
    <Router>
      <Routes>
        {Object.keys(routes).map((key) => (
          <Route
            path={routes[key].path}
            element={routes[key].component}
            key={`route-${key}`}
          />
        ))}
      </Routes>
    </Router>
  );
};
export default App

[inspiraller]

Ok I've bit the bullet and changed the npm package to - react-refresh - as advised from this README
https://www.npmjs.com/package/react-hot-loader

My updated repo:
https://github.com/inspiraller/webpack5_hotload/tree/feature/react-refresh

[minhnh87]

It works for me (the first way). Thank you so much