How to fix Error: While trying to resolve module @apollo/client React Native

Recently, I stumbled upon an error saying  Error: While trying to resolve the module @apollo/client issue when upgrading Apollo Client from 2.6.x to 3.5.x. Then I found this breaking change note in the Apollo Client release note. so Metro bundler doesn't understand what is .cjs extension is. We need to change the default behavior of Metro bundler.

if you check the release note. the metro config file is a bit different than what we have by default.

We need to change as below

const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();

module.exports = {
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
    }),
  },
  resolver: {
    ...defaultResolver,
    sourceExts: [...defaultResolver.sourceExts, "cjs"],
  },
};

Thats all. Dont forget to restart your bundler.