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

[dragoshuniq]

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",

[AustinHunt]

Same issue here. Updated from v 3.

[benjamn]

@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.

[dragoshuniq]

@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.

[AustinHunt]

@benjamn solved this by following those instructions. Thanks.

[benjamn]

@dragoshuniq That looks like a different problem (no mention of @apollo/client), so I take it the original problem is fixed?

If the other problem turns out to be related to Apollo Client, please do open a follow-up issue!

[JClackett]

@benjamn I'm also getting @dragoshuniq's error, I've updated the metro config so it correctly uses cjs, but then all imports from @apollo/client return undefined. Downgrading to a 3.4.x version works, so its definitely an issue with Apollo Client.

Though I do get the same error as @dragoshuniq, before that I get this:

TypeError: undefined is not a function (near '...(0, Apollo.gql)...')

I believe the "Invariant Violation: "main" has not been registered." error happens just because nothing is rendered.

[JClackett]

I have a repro here as part of my teams boilerplate, its part of a monorepo in packages/app.

[JClackett]

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

Adding this to metro.config works

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

[pruge]

I am using Recoil. After modifying metro.config.js, the following error occurs.

error: Error: Unable to resolve module react-dom from /Users/pruge/..../node_modules/recoil/cjs/recoil.js: 
react-dom could not be found within the project or in these directories:
  node_modules
  ../../../../node_modules

If you are sure the module exists, try these steps:
 1. Clear watchman watches: watchman watch-del-all
 2. Delete node_modules and run yarn install
 3. Reset Metro's cache: yarn start --reset-cache
 4. Remove the cache: rm -rf /tmp/metro-*
   6 |
   7 | var react = _interopDefault(require('react'));
>  8 | var reactDom = _interopDefault(require('react-dom'));
     |                                         ^
   9 |
  10 | /**
  11 |  * Copyright (c) Facebook, Inc. and its affiliates.

[zenato]

@pruge I added react-dom and it works fine now.
I think it's an error that occurs cjs of recoil is included in the bundle.

[pruge]

Hi @zenato thanks for replying.

I tried using @apollo/client@3.5.6 and the same error occurred.

[eeshankeni]

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

[ghost]

Still get the same error, even after added the metro.config.js

[mydesweb]

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

[oxbits]

These workarounds break my AWS Amplify Cognito Authentication in React Native.

Will there be a fix in the future that does not require the workaround?

[oxbits]

AWS closed the same issue on their end because they consider it a third party library issue. Seems like we are getting stuck in a catch 22 situation.

aws-amplify/amplify-js#9599