바벨과 웹펙 설정하기에서 질문 있습니다

Slack 클론 코딩[실시간 채팅 with React]

작성

795

npm run build를 통해

dist 폴더에 app.js가 잘 생겨서

index.html을 켜보니 문구가 안뜨고 브라우저 콘솔에

ReferenceError: $RefreshReg$ is not defined

이런 에러가 뜹니다.

무슨 문제인지 아실까요

아래는 제 package.json 파일입니다

"dependencies": {
    "@emotion/babel-plugin": "^11.2.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "babel-core": "^6.26.3",
    "cross-env": "^7.0.3",
    "css-loader": "^5.2.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^2.0.0",
    "typescript": "^4.2.3"
  },
  "devDependencies": {
    "@babel/core": "^7.13.10",
    "@babel/preset-env": "^7.13.12",
    "@babel/preset-react": "^7.12.13",
    "@babel/preset-typescript": "^7.13.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
    "@types/node": "^14.14.35",
    "@types/webpack": "^4.41.26",
    "babel-loader": "^8.2.2",
    "eslint": "^7.22.0",
    "eslint-config-prettier": "^8.1.0",
    "eslint-plugin-prettier": "^3.3.1",
    "prettier": "^2.2.1",
    "react-refresh": "^0.9.0",
    "type-fest": "^1.0.1",
    "webpack": "^5.28.0",
    "webpack-cli": "^4.5.0",
    "ts-node": "^9.1.1"

babel react 웹팩 Socket.io typescript 클론코딩

답변 2

kangsangyeon

조금 뒷북이지만 저처럼 몇 시간을 더 헤메시는 분이 없도록 제가 해결한 방법을 적어놓습니다.

package.json에 작성한 build 명령어를

"build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" webpack",

에서

"build": "cross-env TS_NODE_PROJECT=\"tsconfig-for-webpack-config.json\" NODE_ENV=production webpack",

로, NODE_ENV=production을 넣어주었더니 잘 됐습니다.

Pneumonoultramicro

잘 보고 갑니다

김동영

덕분에 에러 해결했습니다 ㅠㅠ 정말 감사합니다!

특별한 까치

감사합니다!!

제로초(조현영)

지식공유자

webpack.config.ts에 babel plugin으로 react-refresh/babel 넣으셨나요?

sj p

질문자

development: {
              plugins: [['@emotion', { sourceMap: true }], require.resolve('react-refresh/babel')],
           },

이런 코드가 들어가 있긴 한데 따로 더 설정해야 될게 있을까요

sj p

질문자

일단 조현영 님의 package.json을 복붙 한 뒤에는 잘 실행이 돼서 넘어가겠습니다.

제가 뭔가 설치를 잘못 받았었나봅니다.

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

바벨과 웹펙 설정하기에서 질문 있습니다