SocketClient не является конструктором в плагине response-refresh-webpack-plugin

Question

У меня есть проект реакции TypeScript, в котором я пытаюсь добавить response-refresh-webpack-client и получаю эту ошибку:

моя конфигурация веб-пакета:

      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"
  ]
}

Я уже удалил response-hot-loader из своего кода. не могу найти ни одного примера реакции-обновления с машинописным текстом, что мне не хватает? в чем может быть моя проблема? благодарю вас!

Answer 1

1. я хотел бы использовать export default { вместо того module.exports = {
2. Вам необходимо использовать последний плагин обновления (0.5.0), объяснение содержится в этой проблеме.