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

Question

after installing new version of apollo client getting this Error. I tried other versions and to downgrade but nothing. Also I tried to specify in metro.config.js to resolve "cjs" type of file (@apollo/client/main.cjs), but nothing.

Error

error: Error: While trying to resolve module `@apollo/client` from file `****\src\api\queries\home.js`, the package `****\node_modules\@apollo\client\package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`****\node_modules\@apollo\client\main.cjs`. Indeed, none of these files exist:

Dependencies

"@apollo/client": "^3.3.2",
"graphql": "^15.4.0",

Anyone can help me please? Will be very thankful!

Answer 1

As documented at https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19, the solution should be to add

const { getDefaultConfig } = require("metro-config");
const { resolver: defaultResolver } = getDefaultConfig.getDefaultValues();
exports.resolver = {
  ...defaultResolver,
  sourceExts: [
    ...defaultResolver.sourceExts,
    "cjs",
  ],
};

in your metro.config.js.

In my case, I already have a module.exports generated by default, so I just had to make the file so:

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'],
  },
};

Answer 2

Simply adding cjs file extension to metro.config.js works for me.

According to expo's Official Adding more file extensions to assetExts documentation...

const { getDefaultConfig } = require('@expo/metro-config');

const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.assetExts.push('cjs');

module.exports = defaultConfig;

Answer 3

I have exactly the same problem in react-native. From the documentation, it follows that you need to add the ability to handle "cjs" files.

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

Solved the problem today by adding to node_modules/metro-config/src/defaults/defaults.js

export.sourceExts = ["js", "json", "ts", "tsx", "cjs"];

and from the project folder for android:

cd android && ./gradlew clean

for ios in xcode :

clean -> run

Answer 4

For Expo Projects, We need to add cjs to sourceExts.

const { getDefaultConfig } = require('@expo/metro-config');
const defaultConfig = getDefaultConfig(__dirname);

defaultConfig.resolver.sourceExts.push('cjs');
module.exports = defaultConfig;

Apollo Docs for source extension https://github.com/apollographql/apollo-client/blob/main/CHANGELOG.md#apollo-client-354-2021-11-19

Expo syntax for metro config https://docs.expo.dev/guides/customizing-metro/