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

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:

package.json "graphql": "^15.4.0", "@apollo/client": "^3.3.2",

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 17
Comments: 16 (2 by maintainers)

Most upvoted comments

@dragoshuniq @AustinHunt Please see the notice about reconfiguring Metro (to enable the .cjs file extension) in the CHANGELOG.md section for Apollo Client v3.5.4. More details in #9084 if you’re curious.

+23

benjamn on Dec 13, 2021

It is working just fine, this is my setup

/**
 * Metro configuration for React Native
 * https://github.com/facebook/react-native
 *
 * @format
 */
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,
      },
    }),
  },
};

then run npx react-native start --reset-cache

+17

mydesweb on Apr 3, 2022

Nevermind, I was adding cjs to the assetExts instead of sourceExts…

Adding this to metro.config works

config.resolver.sourceExts.push("cjs")

+16

JClackett on Dec 24, 2021

If anyones trying to do this on expo try.

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

module.exports = (async () => {
  const {
    resolver: {sourceExts},
  } = await getDefaultConfig(__dirname);;
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: true,
        },
      }),
    },
    resolver: {
      sourceExts: [...sourceExts, 'cjs'],
    },
  };
})();

eeshankeni on Mar 21, 2022

@benjamn I already tried this solution.

But getting something like this TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions') ERROR Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication). A frequent cause of the error is that the application entry file path is incorrect. This can also happen when the JS bundle is corrupt or there is an early initialization error when loading React Native.

dragoshuniq on Dec 13, 2021