[webpack] Cannot read property 'tap' of undefined 에러

react 프로젝트를 만드는데 next, webpack을 설치, 그리고 script에 next를 이용해서 실행하는데 다음의 에러가 발생한다

 

package.json

{
...
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
...
}

dgpark@Deokui-MBP frontend % npm run dev

ready - started server on http://localhost:3000
TypeError: Cannot read property 'tap' of undefined
    at /Users/dgpark/git/ediya/analytics/frontend/node_modules/@next/react-refresh-utils/ReactRefreshWebpackPlugin.js:100:61
    at SyncHook.eval [as call] (eval at create (/Users/dgpark/git/ediya/analytics/frontend/node_modules/next/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at SyncHook.lazyCompileHook (/Users/dgpark/git/ediya/analytics/frontend/node_modules/next/node_modules/tapable/lib/Hook.js:154:20)
    at Compiler.newCompilation (/Users/dgpark/git/ediya/analytics/frontend/node_modules/next/node_modules/webpack/lib/Compiler.js:631:26)
    at /Users/dgpark/git/ediya/analytics/frontend/node_modules/next/node_modules/webpack/lib/Compiler.js:667:29
    at AsyncSeriesHook.eval [as callAsync] (eval at create (/Users/dgpark/git/ediya/analytics/frontend/node_modules/next/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:4:1)

 

 

처음엔 이유를 몰라 상황을 살펴보니 webpack이 5.x버전으로 올라가면서 발생한 문제.

당장 해결할 방법이 없어 4.x로 낮추라는 것을 찾아 그대로 설치해봤다.

# 이전 webpack 제거
npm un webpack --save
# 4.x 버전으로 설치
npm install webpack@4.44.0 --save

이전

{
...
	"webpack": "^5.6.0"
...
}

이후

{
...
	"webpack": "^4.44.0"
...
}

실행

dgpark@Deokui-MBP frontend % npm run dev

ready - started server on http://localhost:3000
event - compiled successfully

 

 

끝.