[JavaScript知识库]Webpack使用ReactHMR时出现SocketClient is not a constructor

在学习使用Webpack进行ReactHMR的时候出现了一个问题。

Uncaught TypeError: SocketClient is not a constructor
at initWDSSocket (build.js:2229:24)

网上搜了一堆，也没发现啥原因。stackoverflow有人说把@pmmmwh/react-refresh-webpack-plugin升级到最新的。去github上也看了，作者的原话是0.5.0-rc.4 should work with WDS v4 by default, the socket path however would need a bit of re-work - ideally we would want to support both v3 and v4.直接说解决方案吧

const path = require('path')
const {DefinePlugin} = require('webpack')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')

// 代码不要直接拷贝，有些配置可能不一样，主要关注module.exports里面的plugins下的ReactRefreshWebpackPlugin
module.exports = {
    watch: false,
    mode:'development',
    entry:'./src/index.js',
    devtool:false,
    output:{
        filename:'js/build.js',
        path:path.resolve(__dirname,'dist/build'),
        // assetModuleFilename:'img/[name].[hash:4][ext]' // 使用asset时文件保存的路径
    },
    target:'web', // 开发阶段 可以把游览器兼容的属性去掉，就是browserslist配置
    devServer:{
        hot:true // 热更新
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:['style-loader',{
                    loader:'css-loader',
                    options:{
                        importLoaders:1, // 1表示cssloader在工作时又找到了css往前找1个loader
                        esModule:false
                    }
                },'postcss-loader'], 
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','postcss-loader','less-loader'], 
            },
            {
                test:/\.(png|gif|jpe?g)$/,
                type:'asset',
                generator:{
                    filename:'img/[name][hash:4][ext]' // 仅为上面匹配到的设置路径
                },
                parser:{ // 大于403k时保存到上面的路径，否则就转为base64
                    dataUrlCondition:{
                        maxSize:403*1024
                    }
                }
            },
            {
                test:/\.(ttf|woff2?)$/,
                type:'asset/resource',
                generator:{
                    filename:'font/[name][hash:4][ext]' // 仅为上面匹配到的设置路径
                },
            },
            {
                test:/\.[jt]sx?$/,
                exclude:/node_modules/,
                use:['babel-loader']
            }
        ]
    },
    plugins:[
        new CleanWebpackPlugin(), // 打包后会清空文件然后再输出
        new HtmlWebpackPlugin({
            title:'copyWebpackPlugin',
            template:'./public/index.html', // 依照这个模版来打包生成index.html
        }),
        new DefinePlugin({
            BASE_URL: '"./"'
        }),
        new CopyWebpackPlugin({
            patterns:[{
                from: 'public', // 需要被拷贝的目录
                globOptions:{
                    ignore:['**/index.html'] // 需要被忽略掉的文件，**/表示会从上面的from目录开始查找
                }
            }]
        }),
        new ReactRefreshWebpackPlugin({
             overlay: false,
        }),
    ]
}

{
  "name": "02-webpack_config_start",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --config lg.config.js",
    "serve": "webpack serve --config lg.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-react": "^7.16.7",
    "autoprefixer": "^10.4.4",
    "core-js": "^3.21.1",
    "postcss-preset-env": "^7.4.2",
    "react": "^18.0.0",
    "react-dev-utils": "^12.0.0",
    "react-dom": "^18.0.0",
    "regenerator-runtime": "^0.13.9",
    "webpack": "^5.47.1",
    "webpack-cli": "^4.7.2"
  },
  "devDependencies": {
    "@babel/cli": "^7.17.6",
    "@babel/core": "^7.17.8",
    "@babel/plugin-transform-arrow-functions": "^7.16.7",
    "@babel/plugin-transform-block-scoping": "^7.16.7",
    "@babel/preset-env": "^7.16.11",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "babel-loader": "^8.2.4",
    "clean-webpack-plugin": "^4.0.0",
    "copy-webpack-plugin": "^10.2.4",
    "css-loader": "^6.7.1",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.2",
    "less-loader": "^10.2.0",
    "postcss": "^8.4.12",
    "postcss-cli": "^9.1.0",
    "postcss-loader": "^6.2.1",
    "react-refresh": "^0.12.0",
    "style-loader": "^3.3.1",
    "url-loader": "^4.1.1",
    "webpack-dev-server": "^4.7.4"
  }
}

有问题请留言就好了！