[Expo] react-native-web, react-dom 설치 오류 [expo web 사용시]

에러로그

1. expo start --web 후 발생하는 로그

: web으로 열라카면, react-native-web, react-dom가 있어야 함

: 그래서 react-native-web, react-dom를 설치하려면 Y 누르래서 Y 누르니 안된다고 저지랄

√ It looks like you're trying to use web support but don't have the required dependencies installed. Would you like to install react-native-web, react-dom? ... yes

✖ Failed to install react-native-web@~0.18.7, react-dom with error: npm exited with non-zero code: 1
npm exited with non-zero code: 1

2. npx expo install react-native-web@~0.18.7로 직접 설치 시도 후 에러로그

: 한 번에 일 못하길래 직접 해줘봐도 요지랄

npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   peer react@"*" from @react-navigation/bottom-tabs@6.5.3
npm ERR!   node_modules/@react-navigation/bottom-tabs
npm ERR!     @react-navigation/bottom-tabs@"^6.5.3" from the root project
npm ERR!   peer react@"*" from @react-navigation/core@6.4.6
npm ERR!   node_modules/@react-navigation/core
npm ERR!     @react-navigation/core@"^6.4.6" from @react-navigation/native@6.1.2
npm ERR!     node_modules/@react-navigation/native
npm ERR!       peer @react-navigation/native@"^6.0.0" from @react-navigation/bottom-tabs@6.5.3
npm ERR!       node_modules/@react-navigation/bottom-tabs
npm ERR!         @react-navigation/bottom-tabs@"^6.5.3" from the root project
npm ERR!       2 more (@react-navigation/elements, @react-navigation/stack)
npm ERR!   11 more (@react-navigation/elements, ...)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! react-native-web@"~0.18.9" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: react@18.2.0
npm ERR! node_modules/react
npm ERR!   peer react@"^18.2.0" from react-dom@18.2.0
npm ERR!   node_modules/react-dom
npm ERR!     peer react-dom@"^17.0.2 || ^18.0.0" from react-native-web@0.18.10
npm ERR!     node_modules/react-native-web
npm ERR!       react-native-web@"~0.18.9" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\nyong\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\nyong\AppData\Local\npm-cache\_logs\2023-01-10T07_48_19_160Z-debug-0.log

Error: npm exited with non-zero code: 1

---

과정

1. 스택오버플로 해결책 (실패)

: 여러가지 가능성을 제공해주나, 근본적인 해결책은 아니다.

참고 링크 : https://stackoverflow.com/questions/73365315/error-opening-web-version-react-native-in-vs

 

2. 로그를 잘 읽어보자

: expo start를 하니 나오는 로그. 두 번째 줄을 잘 읽어보자

: 요점은 pakage.json에는 react-native-web 디펜던씨가 잘 박혀 있는데, 쓰려니 찾을 수가 없단다.

  즉, 등록은 되어있는데 설치는 안되어있다는 얘기다.

Starting project at C:\Users\nyong\Desktop\Sideprojects\AnimalCenter\FE
"react-native-web" is added as a dependency in your project's package.json but it doesn't seem to be installed. Please run "yarn" or "npm install" to fix this issue.

3. 디렉토리 경로를 잘 확인하자

: 본인의 프로젝트의 루트경로가 과연 맞는지 확인해보자(터미널 경로에서)

: 엄한데다 깔고 있어서 실행이 안되고 있을 수 있다.

ex) 가령, 현재 위치가 FE에 있는지, 본인 프로젝트에 있는지 터미널에서 확인

---

원인

1. 버전문제

: 로그 말대로 pakage.json에 버젓이 있다

: 근데 설치만 안되서 충돌이 일어나는 것

{
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    ...
    "react-native-web": "~0.18.7",
    ...
  }
}

 

2. 터미널에서 expo start 하고있는 현재 경로가 프로젝트 루트 경로가 맞는지 확인

 

 

---

해결방법

: 3번 해결방법을 우선 해보는 것을 권장한다.

: 권장 접근 3번 -> 4번 -> 2번

 

1. pakage.json과 pakage-lock.json에 있는 react-native-web관련 등록을 깡그리 지우고 새로 설치. (비추)

: 일단 욜라 많고, 설령 uninstall같은 명령어로 지우려 해도 잔존할 수 있으므로 비추

 

2. pakage.json에 설정된 버전에 맞는 버전으로 react-native-web설치

: 반드시 본인 버전에 맞추길 (그대로 따라 ㄴㄴ => 스택오버플로우의 해결책도 이 방법인데 상세 설명이 없었던 것) 

/* 필자의 경우 */
$ npm install react-native-web@~0.18.7

3. 올바른 디렉토리로 가서 실행 해보기

: 만약 상위 디렉토리에서 expo를 재설치 했거나 라이브러리를 설치했다면,

  그 상위 폴더에 생긴 node_modules와 pakage.json, pakage-lock.json을 지워줘야 충돌이 안난다

 

4. 버전이 맞지 않는다면, 사실상 해결책이 나와 있음

$ expo doctor --fix-dependencies