How to use the react-hot-loader/root.hot function in react-hot-loader

const { hot } = require("react-hot-loader/root")

// prefer default export if available
const preferDefault = m => m && m.default || m


exports.components = {
  "component---cache-dev-404-page-js": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/.cache/dev-404-page.js"))),
  "component---node-modules-antv-gatsby-theme-antv-site-pages-index-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/pages/index.tsx"))),
  "component---node-modules-antv-gatsby-theme-antv-site-pages-404-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/pages/404.tsx"))),
  "component---site-pages-index-en-ts": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/site/pages/index.en.ts"))),
  "component---site-pages-index-zh-ts": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/site/pages/index.zh.ts"))),
  "component---node-modules-antv-gatsby-theme-antv-site-templates-document-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/templates/document.tsx"))),
  "component---node-modules-antv-gatsby-theme-antv-site-templates-example-tsx": hot(preferDefault(require("/Users/lizhengxue/Documents/AntV/github/L7_2.0/L7/node_modules/@antv/gatsby-theme-antv/site/templates/example.tsx")))
}

import React, { useEffect } from 'react';
import { hot } from 'react-hot-loader/root';

const Main = () => {
  useEffect(() => {
    console.log('componentDidMount');
  });
  return (
    <div style="{{">
      <h2>Hello, I`m ReactMaker.</h2>
      <p>To get started, edit containers/index.js</p>
    </div>
  );
};

export default hot(Main);

}

let props = {};
try {
    props = require(`../../app/components/${queryJson}/${queryJson}.data`)
        .default;
} catch (e) {
    try {
        props = require(`../../app/containers/${queryJson}/${queryJson}.data`)
            .default;
    } catch (e) {
        console.error(e);
    }
}

const Component = hot(component);

export { Component, props };

import {ConnectedRouter} from 'connected-react-router';
import {createHashHistory} from 'history';
import 'spectre.css/dist/spectre.min.css';

const history = createHashHistory();
const store = configureStore(history);

const App: FunctionComponent<{}> = (): ReactElement => (
  
    
      
    
  
);

export default hot(App);

<div id="content">
            
            <footer>
          </footer></div>
        
        
        
      
    
  )
}

export const useAppConfig = () =&gt; useContext(AppContext)

export default hot(App)

class App extends React.Component {
  render() {
    return (
      
        
          
            
          
        
      
    );
  }
}

export default hot(App);

})
  }, [])

  return (
    
      
        
        <header>
        
        
      
    
  )
}

export default hot(App)
</header>

import * as React from 'react';
import { observer } from 'mobx-react-lite';
import { createGlobalStyle, ThemeProvider } from 'styled-components';
import { hot } from 'react-hot-loader/root';

import { Style } from '../../style';
import { StyledApp } from './style';
import { QuickMenu } from '../QuickMenu';
import store from '../../store';

const GlobalStyle = createGlobalStyle`${Style}`;

export const App = hot(
  observer(() => {
    return (
      
        
          
          
        
      
    );
  }),
);

isOpen={connectionTerminated}
            onRequestClose={undefined}
            shouldReturnFocusAfterClose={false}
            contentLabel="Connection terminated modal"
            ariaHideApp={false}
            className="ConnectionTerminated--wrapper Modal DefaultSize"
          >
             this.setState({ connectionTerminated: status })} />
          
        }
      
    );
  }
}
export { ThemeContext };
export default hot(Root);

import React, { Fragment } from 'react';
import { ThemeProvider } from 'styled-components';
import AppRouter from '@routes/Router';
import { Reboot } from '@components';
import { LightTheme } from '@design';

const AppRoot = () => (
  
    
    
      
    
  
);

export default hot(AppRoot);