'SocketClient is not a constructor' 在 react-refresh-webpack-plugin 中

Question

我有一个 typescript react 项目，我尝试在其中添加 react-refresh-webpack-client 并收到此错误：

我的 webpack 配置：

import HtmlWebpackPlugin from 'html-webpack-plugin';
import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import ReactRefreshTypeScript from 'react-refresh-typescript';
import { HotModuleReplacementPlugin } from 'webpack';

const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx"]
  },
  optimization: {
    minimizer: [new UglifyJsPlugin()],
    splitChunks: {
      chunks: 'all'
    }
  },
  mode: isDevelopment ? 'development' : 'production',
  devServer: {
    port: process.env.WEBPACK_PORT,
    historyApiFallback: true,
    hot: true,
  },
  module: {
    rules: [
      {
        test: /\.[jt]sx?$/,
        exclude: /node_modules/,
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              getCustomTransformers: () => ({
                before: isDevelopment ? [ReactRefreshTypeScript()] : [],
              }),
              // `ts-loader` does not work with HMR unless `transpileOnly` is used.
              transpileOnly: isDevelopment,
            },
          },
        ],
      },
      { enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'source-map-loader'
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        type: 'asset/resource'
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './client/index.html',
      filename: './index.html',
    }),
    isDevelopment && new HotModuleReplacementPlugin(),
    isDevelopment && new ReactRefreshWebpackPlugin(),
  ],
  entry: {
    main: ['./client/index.tsx'],
    vendor: ['lodash', 'react', '@material-ui/core'],
  },
  devtool: 'source-map'
};

这是我的 tsconfig 文件：

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "jsx": "react",
    "strict": true,
    "alwaysStrict": true,
    "noImplicitReturns": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": [
    "node_modules"
  ]
}

我已经从我的代码中删除了 react-hot-loader。找不到任何使用打字稿进行反应刷新的示例，我缺少什么？我的问题是什么？谢谢！

Answer 1

我会使用 export default { 而不是 module.exports = {
您需要使用最新的刷新插件(0.5.0)，说明在issue.

'SocketClient is not a constructor' 在 react-refresh-webpack-plugin 中

'SocketClient is not a constructor' in react-refresh-webpack-plugin

reactjs

typescript

webpack

hot-reload

react-refresh