[RN] Error: Unable to resolve module ./App.js 오류 해결

error: Error: Unable to resolve module ./App.js from /Users/[사용자이름]/Profee_Client/android/Profee_Client/index.js: 

None of these files exist:
  * App.js(.android.js|.native.js|.js|.android.jsx|.native.jsx|.jsx|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * App.js
  4 |
  5 | import {AppRegistry} from 'react-native';
> 6 | import App from './App.js';
    |                  ^
  7 | import {name as appName} from './app.json';
  8 |
  9 | AppRegistry.registerComponent(appName, () => App);
    at ModuleResolver.resolveDependency (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:112:15)
    at DependencyGraph.resolveDependency (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/node-haste/DependencyGraph.js:232:43)
    at /Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/lib/transformHelpers.js:156:21
    at resolveDependencies (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/DeltaBundler/buildSubgraph.js:42:25)
    at visit (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/DeltaBundler/buildSubgraph.js:83:30)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async Promise.all (index 0)
    at async buildSubgraph (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/DeltaBundler/buildSubgraph.js:103:3)
    at async Graph._buildDelta (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/DeltaBundler/Graph.js:157:22)
    at async Graph.initialTraverseDependencies (/Users/[사용자이름]/Profee_Client/android/Profee_Client/node_modules/metro/src/DeltaBundler/Graph.js:140:19)

 

 

에뮬레이터 에러 화면

 

 

빌드 오류들을 해결한 후 프론트를 띄우려 했지만, 예상치 못한 에러가 발생했다.

 

프로젝트가 TypeScript로 작성되어 있어 기본적으로 App.tsx 파일이 프론트에 로드되었는데, 나는 App.js에 프론트 코드를 작성해놓았기 때문에 js 파일을 사용하고 싶었다.

 

그래서 index.js 파일의 구문을 아래처럼 './App.js'로 명시했지만, 이 과정에서 에러가 발생했다.

import App from './App';

// ===> 아래처럼 변경 ===>

import App from './App.js';

 

이 오류는 index.js가 App.js 파일을 제대로 찾지 못해 발생한 문제였다.

 

 

 

해결 방법

해결방법이라고 할 것도 없지만, 분명 작성한 App.js 파일이 ls 명령어로 보이지 않아 폴더 구조를 뒤지다가 알아낸 사실이 있다.

 

바로 과거의 내가 Profee_Client 폴더 내에 Profee_Client라는 동일한 이름의 프로젝트 폴더를 만들었다는 사실이다.

 

그리고 App.js는 보란듯이 가장 상위의 Profee_Client 폴더 내에 들어있었다. (ㅋㅋ)

 

앞으로 실수하지 않도록 가장 껍데기 폴더의 이름을 Profee_Cli 로 바꿔주었고, Profee_Cli 내부에 있던 App.js를 Profee_Client 폴더 내로 옮겼다.

 

그리고나서 Profee_Client 단에서 npm start 명령어를 입력하니 짜놓았던 프론트 코드가 뜨는 것을 확인할 수 있었다.

해결 완료 🥶

 

이 화면을 보기까지 얼마나 시간이 걸렸는지 ... 😦

 

🐹 다음에는 프로젝트 폴더 구조를 모조리 손본 후 포스팅하도록 하겠다. 🐹