[React Native] pnpm monorepo 사용 시, metro error

react-native 0.72.4

 

프로젝트가 pnpm monorepo로 되어 있고 mobile을 추가하기 위해

React Native CLI Quickstart로 프로젝트 설치 및 설정하고

pnpm start

실행하니 두둥!

error: Error: Unable to resolve module react-native from /Users/project.../index.js: react-native could not be found within the project or in these directories:
  node_modules
  ../../node_modules

 

역시 react native는 만만한 상대가 아니였...

 

이것저것 테스트해 본 결과,

yarn으로 실행시에는 yarn start나 yarn ios 모두 이상이 없었다.

 

확인된 해결 방법으론,

1. yarn을 사용

2. pnpm을 사용하되 metro.config.js에 설정을 추가

 

2번의 경우를 더 살펴보면,

pnpm start는 성공, pnpm ios는 에러 발생

 

바로 metro.config.js에 설정을 추가해보자.

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

/**
 * Metro configuration
 * https://facebook.github.io/metro/docs/configuration
 *
 * @type {import('metro-config').MetroConfig}
 */
const config = {
  resolver: { // 공식문서에도 관련 내용이 있음
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
  watchFolders: [path.join(__dirname, '..', '..')], // 이 부분이 monorepo root의 node_modules를 참조하도록 하는듯
};

module.exports = mergeConfig(getDefaultConfig(__dirname), config);

 

pnpm start

으로 metro 실행 후

추가된 실행 옵션 i로 ios 실행하면... 성공!

옵션 a인 android는 아직 미해결 ㅠ

 

 

조금 예전 글들을 보면,

pnpm을 공식적으로 지원하지 않는다는 말도 있었으며

최근에서야 지원해주는 느낌적인 느낌.

 

 

 

끝.

 

 

참고.

React Native 0.72 - Symlink Support, Better Errors, and more · React Native