"npm start" 시 webpack 에러가 나는 경우

오랜만에 이전에 작업했던 프로젝트를 실행하였다.

잠깐, 내용을 확인할 것이 있었기 때문이다.

 

그런데, 실행으로 "npm start"을 입력하니 에러가 발생했다.

There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.    

The react-scripts package provided by Create React App requires a dependency:

  "webpack": "4.41.0"

Don't try to install it manually: your package manager does it automatically.
However, a different version of webpack was detected higher up in the tree:

  D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\node_modules\webpack (version: 5.83.1) 

Manually installing incompatible versions is known to cause hard-to-debug issues.     

If you would prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
That will permanently disable this message but you might encounter other issues.      

To fix the dependency tree, try following the steps below in the exact order:

  1. Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
  2. Delete node_modules in your project folder.
  3. Remove "webpack" from dependencies and/or devDependencies in the package.json file in your project folder.
  4. Run npm install or yarn, depending on the package manager you use.

In most cases, this should be enough to fix the problem.
If this has not helped, there are a few other things you can try:

  5. If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
     This may help because npm has known issues with package hoisting which may get resolved in future versions.

  6. Check if D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\node_modules\webpack is outside your project directory.
     For example, you might have accidentally installed something in your home folder.
  7. Try running npm ls webpack in your project folder.
     This will tell you which other package (apart from the expected react-scripts) installed webpack.

That would permanently disable this preflight check in case you want to proceed anyway.

P.S. We know this message is long but please read the steps above :-) We hope you findStarting the development server...

위의 문제는 간단하게 보자면, 프로젝트의 webpack 버전과 상위 폴더의 webpack 버전이 달라서 충돌이 나는 경우였다.

 

이 문제를 해결하기 위해서 설명에 나와있는 대로,

프로젝트 내 "package-lock.json" 파일과 "node_modules" 폴더를 삭제하고 "npm install"을 실행하였다.

 

그럼에도 불구하고, 에러는 여전했다.

그래서 두 번째 방법으로 프로젝트에 ".env" 파일을 생성하고 다음과 같은 코드를 추가하였다.

SKIP_PREFLIGHT_CHECK=true

쉽게 말해, 발생한 에러를 무시하겠다는 것인데 사실상 제대로 해결하는 방법은 아니다.

그럼에도 불구하고! 다시 실행해도 실행이 제대로 이루어지지 않았다.

 

1시간 가량 구글 검색끝에 해결할 수 있는 방법을 알아냈다.

이 방법은 나에게는 적용이 됐으나, 반대로 적용이 안 될 수도 있을 것이다.

 

위의 에러 상황에서 보듯이, 상위 폴더의 webpack과 충돌이 발생한 것이다.

그래서 첫 번째로 상위 폴더의 node_modules의 webpack 폴더를 삭제하였다.

 

그리고 나서 실행을 하면 다음과 같은 에러를 마주할 수도 있다. (나는 마주하였다)

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\NormalModule.js:417:16)
    at handleParseError (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\NormalModule.js:471:10)
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\NormalModule.js:503:5
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\NormalModule.js:358:12
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:43:16)
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:79:9
D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:71:19)
    at Object.createHash (node:crypto:133:10)
    at module.exports (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\util\createHash.js:135:53)
    at NormalModule._initBuildHash (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\NormalModule.js:417:16)
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\webpack\lib\NormalModule.js:452:10
bpack\lib\NormalModule.js:323:13
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Bitnami\wampstack-7.1.20-1\apache2\htdocs\ToyProject\React_todo_List\node_modules\babel-loader\lib\index.js:55:103 {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],    
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'

 

위 에러의 문제는 "react-script" 버전이 잘못되었기 때문에 발생한 것이었다.

그래서 나는 다음 단계를 진행하였다.

 

// react-scripts 삭제
npm uninstall react-scripts

// react-scripts 재설치
npm install react-scripts

그리고 나서 다시 "npm start"로 실행을 하였더니 제대로 동작하였다.

아무래도 예전에 작업한 프로젝트라 그런지 버전 충돌이 일어난 것 같다.

이번 계기로 버전 관리의 중요성을 몸소 깨닫게 된 경험을 하였다.