[ React ] npm start , webpack 에러

create-react-app 으로 React 프로젝트를 만들어 진행중이었다

컴퓨터를 잠깐 재부팅 후 다시 React를 시작하려고

npm start 로 띄우는데

이게 무슨일이여.. 

 

초기 create-react-app 설치 시에 자주 만났던 에러를 또 다시 만났다.

( 성공적으로 깔고 프로젝트를 만들어가는 중에도 만나게 되는구나.. )

 

과연 오늘의 삽질은 몇시간이 걸릴것인가 

한번 겪은 에러가 아니니까 내 목표는 에러 후기 작성까지 30분 

할 수 있ㄷ ㅏ다아러ㅣ멀아이ㅏ얼아ㅣ러ㅣㅇㄹ 

삽질 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.5"
 
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:
 
  /Users/moditt/node_modules/webpack (version: 4.41.6) 
 
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 /Users/moditt/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.
 
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project.
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 find them helpful!
 

 

해결완료.

삽질 시간 1시간30분

 

대충 읽어보니

webpack 버전이 맞지 않아 번호의 순서를 따라 시도해보라는 내용이다

 

ㅋ

ㅋㅋㅋㅋㅋㅋ

30분만에 해결은 무슨......

 

결국 외부경로와 버전을 맞추려다가

또또또또 반복되는 에러때문에

.env 파일을 만들어서

SKIP_PREFLIGHT_CHECK=true 를 넣어주었다

 

근데 여기서 문제 또 발생

.env 파일 format 형식은 무엇이던가?

인텔리제이에서 찾을 수 없었다.

굳이 또.. vscode를 켜서 format을 찾고 

저 한줄 넣고 완료

 

여기까지 1시간 30분이 걸렸다.

멍청멍청...

개발은 삽질의 세계다 😃