[BugFix] React-native 에서 Apllo Client 사용시 Metro has encountered an error

React-native 에 Apllo Client 를 추가할때, 아래와 같은 에러가 발생할때 해결법

Metro has encountered an error: While trying to resolve module `@apollo/client/link/ws` from file `/Users/donghopark/Projects/useby/App.tsx`, the package `/Users/donghopark/Projects/useby/node_modules/@apollo/client/link/ws/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/donghopark/Projects/useby/node_modules/@apollo/client/link/ws/ws.cjs`. Indeed, none of these files exist:

  * /Users/donghopark/Projects/useby/node_modules/@apollo/client/link/ws/ws.cjs(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx)
  * /Users/donghopark/Projects/useby/node_modules/@apollo/client/link/ws/ws.cjs/index(.native|.ios.js|.native.js|.js|.ios.json|.native.json|.json|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx): /Users/donghopark/Projects/useby/node_modules/metro/src/node-haste/DependencyGraph.js (311:17)

  309 |
  310 |         if (error instanceof InvalidPackageError) {
> 311 |           throw new PackageResolutionError({
      |                 ^
  312 |             packageError: error,
  313 |             originModulePath: from,
  314 |             targetModuleName: to

RCTFatal
__28-[RCTCxxBridge handleError:]_block_invoke
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
__CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE__
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
-[UIApplication _run]
UIApplicationMain
main
start_sim
0x0

위의 에러는 Apollo Client v3.5 부터 발생하는 버그로, 지금까지는 Workaround 만 제공되고 있는 상태이다. (지금 시점 2022년 1월 31일)

React-native 의 번들러인 Metro 가 cjs 파일을 처리하지 못해서 발생하는 현상으로, metro.config.js 파일을 아래와 같이 수정하여 해결할 수 있다.

const { getDefaultConfig } = require("metro-config");

const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();

module.exports = {

resolver: {

...defaultResolver,

sourceExts: [

...defaultResolver.sourceExts,

"cjs",

],

},

transformer: {

getTransformOptions: async () => ({

transform: {

experimentalImportSupport: false,

inlineRequires: true,

},

}),

},

};

문제해결!

Link: https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19