Unable to resolve "missing-asset-registry-path" from 문제 해결

리액트 네이티브를 공부하고 있는데 svg를 import하여 사용할 수 있게 설정을 하면서 문제가 생겼다.

png를 사용하는 경로들을 못찾는 문제..

 

다들 리액트 네이티브 svg를 구글에 검색하고 react-native-svg / react-native-svg-transformer 라이브러리를 사용할 것 같다.

나도 그랬고..

GitHub - software-mansion/react-native-svg: SVG library for React Native, React Native Web, and plain React web projects.

GitHub - kristerkari/react-native-svg-transformer: Import SVG files in your React Native project the same way that you would in

사용방법은 라이브러리에 잘 작성되어있다.

$ npx expo install react-native-svg
$ npm install react-native-svg

 

- 설치 후  metro.config.js 파일을 작성해주어야하는데. ts를 사용한다면 declarations.d.ts 파일도 작성해야한다.

- 그냥 막 사용하는게 아니라 버전별로 사용해야하는 config가 있으니 확인 잘해야함!

---

그렇게 생긴 문제

// metro.config.js

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("react-native-svg-transformer"),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

- 난 이렇게 사용을 했는데 사용한 후 갑자기 png 에러가 터지기 시작했다..

 

예상한 문제

- 리액트 네이티브 버전 문제

- expo 문제..

Couldn't connect Metro with iOS or Android emulator after upgrading to 0.72.1 · Issue #1028 · facebook/metro

그렇게 깃허브에서 나와 같은 문제를 발견했다....

Huntie... 고마워....

---

문제 해결!

// metro.config.js

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

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

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  transformer: {
    babelTransformerPath: require.resolve("react-native-svg-transformer"),
  },
  resolver: {
    assetExts: assetExts.filter((ext) => ext !== "svg"),
    sourceExts: [...sourceExts, "svg"],
    resolverMainFields: ["sbmodern", "react-native", "browser", "main"],
  },
  watchFolders: [path.resolve(__dirname, "../")],
};

module.exports = mergeConfig(defaultConfig, config);