React-Native .JSX 파일을 찾을 수 없는 오류

만들어놓았던 프로젝트의 버전을 업데이트 할 상황이 생겨 업데이트를 진행하고 나서 다시 시작을 하니 아래와 같은 오류가 떴다.

해당 파일을 찾는 코드는 아래와 같이 되어있었는데

처음 App.js일 때는 문제 없었는데 App.jsx로 확장자를 고치고 난 후 발생한 오류라 확장자 문제라고 생각하여 그냥 검색했다.

오류를 봐서는 타입스크립트를 사용하라는 것 같은데 해당 작업은 미루기로 했다.

계속해서 JSX파일을 사용하려면 기존에 있던 metro.config.js파일을 다음과 같이 변경하자.(필자는 RN 0.69버전이다)

module.exports = {
  resolver: {
    sourceExts: ['jsx', 'js', 'ts', 'tsx', 'cjs', 'json'] <-- 추가
  },
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
};

다시 프로젝트를 실행시켜보면 정상적으로 작동하는것을 볼 수 있다!

참고

How to allow react-native to enable support for JSX (extension) files