SocketClient is not a constructor 오류

아랫분과 동일하게 Cannot get / 메세지가 계속 떠서 제로초님 공지글에 있는 4버전 깃허브 소스로 다 바꿨는데 SocketClient is not a constructor 에러 뜨면서 화면 로딩이 안됩니다.

"dependencies": {
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "@babel/preset-react": "^7.12.1",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.5",
    "babel-loader": "^8.1.0",
    "react-refresh": "^0.10.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^4.0.0"
  }

const path = require("path");
const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  name: "wordrelay-setting",
  mode: "development", // 실서비스: production
  devtool: "eval",
  resolve: {
    extensions: [".js", ".jsx"],
  },

  entry: {
    app: ["./client"],
  }, // 입력
  module: {
    rules: [
      {
        test: /\.jsx?/,
        loader: "babel-loader",
        options: {
          presets: [
            [
              "@babel/preset-env",
              {
                targets: {
                  browsers: ["> 5% in KR", "last 2 chrome versions"], // browserslist
                },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: ["react-refresh/babel"],
        },
      },
    ],
  },
  plugins: [new RefreshWebpackPlugin()],
  output: {
    path: path.join(__dirname, "dist"), 
    filename: "app.js",
    publicPath: "/dist",
  }, // 출력
  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};

plugins: [
    new RefreshWebpackPlugin({ overlay: false }),
],