카테고리 없음

[React Native] missing-asset-registry-path could not be found within the project or in these directories: node_modules 에러 해결

도우 2024. 8. 30. 18:57
반응형

 

 BUNDLE  ./index.android.js

error: Error: Unable to resolve module missing-asset-registry-path from C:\Users\pineone\Desktop\workSpace\RoundNoteCli\node_modules\@react-navigation\elements\lib\commonjs\assets\back-icon-mask.png: missing-asset-registry-path could not be found within the project or in these directories:
  node_modules
> 1 | �PNG
  2 | 
  3 |
  4 | IHDR2���gAMA��
                    �a cHRMz&�����u0�`:�p��Q<bKGD���̿tIME�

 

 

React Native 프로젝트에서 SVG 파일을 적용하다가 android 플랫폼에서만 위 에러가 발생하고 SVG 파일이 읽혀지지 않았다. 그 이유는 Web과 Android의 자산 처리 방식이 다르기 때문이라고 한다.

Metro 번들러는 React Native 프로젝트에서 자산과 소스 코드를 번들링하는 역할을 한다. 기본적으로 Metro는 이미지 파일 (png, jpg...)을 자산으로 처리하는데 SVG 파일의 경우 자산 파일로 처리되면 제대로 렌더링되지 않는다고 한다.

따라서 이를 JSX 컴포넌트로 변환하는 react-native-svg-transformer를 사용해야한다.

Android에서만 SVG파일이 렌더링 되지 않았던 이유는 Web에서는 JSX로 변환하는 것이 일반적이기에 문제가 발생하지 않았지만, android에서는 SVG를 자산 파일로 처리하려고 시도했기 때문이다. 따라서 android에서도 Metro가 SVG 파일을 JSX로 처리하도록 설정함으로써, 문제를 해결할 수 있다.

 

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

const {
  resolver: { sourceExts, assetExts },
} = getDefaultConfig(__dirname);

const config = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
    babelTransformerPath: require.resolve('react-native-svg-transformer'), // 이 부분이 핵심
  },
  resolver: {
    assetExts: assetExts.filter(ext => ext !== 'svg'), // svg를 자산에서 제외
    sourceExts: [...sourceExts, 'svg'], // svg를 소스 확장자에 추가
  },
};

module.exports = mergeConfig(defaultConfig, config);

 

 

반응형