RN(ReactNative) jsx 파일 사용하기

ReactNative 프로젝트에서 jsx 파일을 import 해서 사용하면

import 안된다는 에러 메시지가 나옵니다

jsx 파일을 import 못합니다

 

원인

metro 에서 jsx 파일을 읽어오지 못해서 발생되는 것입니다

해결방법

프로젝트 폴더 root 에 있는 metro.config.js 파일에 jsx 파일을 읽어 올 수 있게 수정합니다

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
const {getDefaultConfig} = require('metro-config');

module.exports = (async () => {
  const {
    resolver: {sourceExts},
  } = await getDefaultConfig();
  return {resolver: {sourceExts: [...sourceExts, 'jsx']}};
})();

metro.config.js 파일에서 sourceExts  에 jsx 를 추가했습니다

 

메트로를 다시 실행합니다

yarn start

또는

npx react-native start