AntD CollapsePanel TypeError: Cannot read property ‘offsetHeight‘ of null

AntD Collapse hot update was not successful TypeError: Cannot read property ‘offsetHeight’ of null

Antd热部署出错

热部署插件：react-hot-loader
react + antd + webpack
出现的问题：

(AppContainer, at CSSMotion (webpack://antd-collapse-issue/./node_modules/rc-motion/es/CSSMotion.js?:53:32)) TypeError: Cannot read property 'offsetHeight' of null

Stack trace:
at Object.getCurrentHeight [as start] (webpack://antd-collapse-issue/./node_modules/antd/es/_util/motion.js?:23:18)
at CSSMotion (webpack://antd-collapse-issue/./node_modules/rc-motion/es/CSSMotion.js?:53:32)
at div
at CollapsePanel (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at CollapsePanel (webpack://antd-collapse-issue/./node_modules/antd/es/collapse/CollapsePanel.js?:22:74)
at div
at Collapse (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at Collapse (webpack://antd-collapse-issue/./node_modules/antd/es/collapse/Collapse.js?:34:62)
at App (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at AppContainer (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at HotExportedApp (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
(2/2)
(AppContainer, at CSSMotion (webpack://antd-collapse-issue/./node_modules/rc-motion/es/CSSMotion.js?:53:32)) TypeError: Cannot read property 'offsetHeight' of null

Stack trace:
at Object.getCurrentHeight [as start] (webpack://antd-collapse-issue/./node_modules/antd/es/_util/motion.js?:23:18)
at CSSMotion (webpack://antd-collapse-issue/./node_modules/rc-motion/es/CSSMotion.js?:53:32)
at div
at CollapsePanel (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at CollapsePanel (webpack://antd-collapse-issue/./node_modules/antd/es/collapse/CollapsePanel.js?:22:74)
at div
at Collapse (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at Collapse (webpack://antd-collapse-issue/./node_modules/antd/es/collapse/Collapse.js?:34:62)
at App (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at AppContainer (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)
at HotExportedApp (eval at ES6ProxyComponentFactory (webpack://antd-collapse-issue/./node_modules/react-hot-loader/dist/react-hot-loader.development.js?), <anonymous>:14:7)

解决方式

将react-hot-loader替换为react-refresh插件

1. install 插件

	npm install @pmmmwh/react-refresh-webpack-plugin react-refresh -d

2. webpack 配置

const ReactRefreshPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          presets: ['@babel/env', '@babel/preset-react'],
          plugins: [require.resolve('react-refresh/babel')], // 为 react-refresh 添加
        },
      },
    ],
  },
  plugins: [
    new ReactRefreshPlugin(),    // 为 react-refresh 添加
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
};

3. 如果配置了babelrc，则如下

{
    "env": {
        "development": {
            "presets": ["react-app"],
            "plugins": ["react-refresh/babel"] //在development环境配置
        },
    }
} 

4. package.json

 "scripts": {
    "start": "webpack-dev-server --hot"
  },

5. 入口处不再需要引入其他方法 不需要如hot-loader一样导出hot(model)(App)