React Ts项目 react-hot-loader 热更新，类型“NodeModule”上不存在属性“hot”

配置热更新会报：类型“NodeModule”上不存在属性“hot”。
由于使用了ts，在类型检查过程中对于不存在的属性就会抛此种格式的提示，解决方法也很简单，使用as关键字将 module 断言成 any 类型：

if ((module as any).hot) {
  (module as any).hot.accept('./App', () => {
    const NextApp = require('./App').default;
    render(NextApp);
  })
}

react-hot-loader 实现热更新

1、安装两个插件：

yarn add react-hot-loader -D
yarn add @hot-loader/react-dom -D

@hot-loader/react-dom插件要对应react版本
2、.babelrc 文件修改babel配置：

"plugins": [
    ["react-hot-loader/babel"]

3、修改webpack（这里使用的是版本5）
（1）webpack.target 属性设置为“web”，此属性是指定开发环境，不设置此属性的话热更新无效
（2）webpack.devServer.hot设置为“true”，开启热更新（很奇怪的是不设置此属性，使用react-hot-loader也不影响热更新）
（3）webpack.resolve.alias添加配置

alias: {
  'react-dom': '@hot-loader/react-dom'
}

4、项目入口文件的热更新配置

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import store from './store';
import App from './App';
import { AppContainer } from 'react-hot-loader'

const render = (Component: any) => {
  ReactDOM.render(
    <Provider store={store}>
      <ConfigProvider locale={zhCN}>
        <AppContainer>
          <Component />
        </AppContainer>
      </ConfigProvider>
    </Provider>,
    document.getElementById('root')
  );
}

render(App);

if ((module as any).hot) {
  (module as any).hot.accept('./App', () => { 
    const NextApp = require('./App').default; 
    render(NextApp);
  })
}

以上就是关于热更新的配置了。