본문 바로가기
카테고리 없음

리액트 Failed to load PostCSS config: Failed to load PostCSS config 에러 해결

by 라스형 2024. 12. 11.

정말 아무것도 안했는데 제목과 같은 에러가 나타났다.

빠르게 답을 얻고자 하는 분들을 위한 해결은 아래와 같다.

프로젝트에서 yarn을 업그레이드 하고 다시 yarn dev 하면 정상적으로 작동 된다.

터미널 -> 프로젝트 -> yarn upgrade -> yarn dev

버전이 동일함에도 upgrade하면 문제가 해결이 된다.. (이유는.. ㅠㅠ)

몇 시간 전까지만 해도 깃랩에서 내려받아 아무 문제 없이 run이 되었던건데.. 테스트 하다가 처음부터 하려고 프로젝트를 삭제하고 다시 깃랩에서 클론 받아서 run 했더니 저런 에러가 나를 맞이 했다.

리액트 에러

 

node:internal/process/promises:289
            triggerUncaughtException(err, true /* fromPromise */);
            ^

[Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /Users/Documents/git): [Error] Cannot find module '/Users/Documents/git/node_modules/@jridgewell/gen-mapping/dist/gen-mapping.umd.js'
Error: Cannot find module '/Users/Documents/git/node_modules/@jridgewell/gen-mapping/dist/gen-mapping.umd.js'
    at createEsmNotFoundErr (node:internal/modules/cjs/loader:1181:15)
    at finalizeEsmResolution (node:internal/modules/cjs/loader:1169:15)
    at resolveExports (node:internal/modules/cjs/loader:591:14)
    at Module._findPath (node:internal/modules/cjs/loader:668:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1130:27)
    at Module._load (node:internal/modules/cjs/loader:985:27)
    at Module.require (node:internal/modules/cjs/loader:1235:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.<anonymous> (/Users/Documents/git/node_modules/sucrase/dist/computeSourceMap.js:1:92)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)] {
  code: 'MODULE_NOT_FOUND',
  path: '/Users/Documents/git/node_modules/@jridgewell/gen-mapping/package.json'
}

Node.js v20.11.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[npm만 사용하다가 yarn을 처음 써봤는데, 그래서 그런가 했더니 몇 시간 전에는 잘 됐단 말이지..]

 

그래서 백엔드 동료분께 물어봤는데 본인은 아무것도 안했다고 했다. 본인도 테스트 해본다고 한 후 동일한 증상이 나타났다.. 도대체 왜..

 

진짜 아무것도 안했는데 갑자기 툭 튀어 나온 문제라 서로 당황..

 

그래서 프로젝트를 다시 받아서 해보고, node_module, yarn.lock 지워서 다시 yarn install(yarn 만 쳐도 된다) 해보고, postCSS config도 지워보고 (당연히 에러) 해봤는데 안되더라..

 

구글링 해도 안되는 상황에 답이 없었다.. 그런 찰나에 백엔드 동료가 답을 찾음!

 

현재 node와 yarn의 버전은 아래와 같다.

 

yarn version
yarn 버전

 

node version
node 버전

 

해결 방법은 바로!!

yarn upgrade
yarn upgrade

 

프로젝트에서 yarn을 업그레이드 하고 다시 yarn dev 하면 정상적으로 작동 된다.

터미널 -> 프로젝트 -> yarn upgrade -> yarn dev

버전이 동일함에도 upgrade하면 문제가 해결이 된다.. (이유는.. ㅠㅠ)

 

어이 없게도 yarn upgrade 하라고 한다. update 아님!!

 

버전도 동일하게 1.22.22 인데 upgrade 하면 된다고? 해서 했더니 되더라.. 엥? (upgrade 하고 나서도 버전은 1.22.22)

 

update 아니고 upgrade 맞냐고 했는데 맞다고 했다.. 뭐지 진짜..

 

무튼 yarn upgrade를 통해서 다시 정상적으로 실행할 수 있었다. 휴.. 환경 설정이 세상에서 제일 어려운듯 ㅠㅠ

 

그래서 이거 어떻게 찾았냐고 했더니 클로드에 물어봐서 해결했다고 했다. 챗gpt는 해결 못했다고 함.. ㅋㅋ

 

그래도 금방 해결할 수 있어서 너무나 다행.. 그나저나 이 말도 안되는 상황은 뭐였지.. 진짜 아무것도 안했는데 왜 안됐던겨..

티스토리툴바