'Metro has encountered an error: While trying to resolve module `@apollo/client`

I am trying to install GraphQL into my React Native app and in doing so, I was given this error message.

I have confirmed that the file actually exists and have quit everything and restarted my server and nothing is working. Any advice is appreciated. Thanks!

Metro has encountered an error: While trying to resolve module @apollo/client from file /Users/johnhenryluke/Desktop/sparta-app2/App.js, the package /Users/johnhenryluke/Desktop/sparta-app2/node_modules/@apollo/client/package.json was successfully found. However, this package itself specifies a main module field that could not be resolved (/Users/johnhenryluke/Desktop/sparta-app2/node_modules/@apollo/client/main.cjs. Indeed, none of these files exist:

  • /Users/johnhenryluke/Desktop/sparta-app2/node_modules/@apollo/client/main.cjs(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
  • /Users/johnhenryluke/Desktop/sparta-app2/node_modules/@apollo/client/main.cjs/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json): /Users/johnhenryluke/Desktop/sparta-app2/node_modules/metro/src/node-haste/DependencyGraph.js (436:17)

434 | 435 | if (error instanceof InvalidPackageError) {

436 | throw new PackageResolutionError({ | ^ 437 | packageError: error, 438 | originModulePath: from, 439 | targetModuleName: to

ABI44_0_0RCTFatal __37-[ABI44_0_0RCTCxxBridge 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 0x0

node.jsreactjsreact-nativegraphql


Solution 1:[1]

You need to tell Metro to accept the cjs file extension in your metro.config.js

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

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Thomas Dittmar

Related Questions