SocketClient is not a constructor 오류

웹 게임을 만들며 배우는 React

2-9. 웹팩 데브 서버와 핫 리로딩

작성

714

아랫분과 동일하게 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,
  },
};

react

답변 2

저도 똑같은 오류해결하느라 찾아봤는데 아래와 같이 설정하는 방법으로도 오류해결을 할 수 있습니다. :)

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

김예란

감사합니다. 덕분에 에러 해결되었습니다!!

제로초(조현영)

지식공유자

바꾸고 나서 npm i 하셨나요?

송수진

질문자

네네 package.json 저장하고 npm i 도 완료했는데 화면이 로딩안됩니다ㅠ

pmmmwh/react-refresh-webpack-plugin, webpack-dev-server 등 설치파일들을 다시 npm i로 다운받고, 버전들은 깃허브에있는 버전으로 수정한뒤에 npm i 했습니다.

이후 npm run dev 했더니 터미널에는 에러가 안나는데 웹에 접속하면 아래처럼 에러가 납니다ㅠ

{
  "name": "response-check",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "dev": "webpack serve --env development"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Song-Sujin/react_study.git"
  },
  "author": "Sujin",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/Song-Sujin/react_study/issues"
  },
  "homepage": "https://github.com/Song-Sujin/react_study#readme",
  "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.4.3",
    "babel-loader": "^8.1.0",
    "react-refresh": "^0.9.0",
    "webpack": "^5.3.2",
    "webpack-cli": "^4.1.0",
    "webpack-dev-server": "^4.0.0"
  }
}

const path = require("path"); // node에서 경로를 쉽게 조작할 수 있도록 해주는 것. path 가져오는 것
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
//process.env.NODE_ENV = "production";

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: ["last 2 chrome versions"] },
                debug: true,
              },
            ],
            "@babel/preset-react",
          ],
          plugins: ["react-refresh/babel"],
        },
        exclude: path.join(__dirname, "node_modules"),
      },
    ],
  },
  plugins: [new ReactRefreshWebpackPlugin()],
  output: {
    path: path.join(__dirname, "dist"),
    filename: "[name].js",
    publicPath: "/dist",
  },
  devServer: {
    devMiddleware: { publicPath: "/dist" },
    static: { directory: path.resolve(__dirname) },
    hot: true,
  },
};

제로초(조현영)

지식공유자

"@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.6",

설치하세요.

인프런 커뮤니티 질문&답변

SocketClient is not a constructor 오류