React native - cannot read property 'FIELD' of undefined

[83naff]

I'm using react native along with apollo graphql and I'm getting an issue with the client in which a certain property 'FIELD' cannot be read. This happens whenever I try to instantiate the apollo client, like so:

import { ApolloClient, InMemoryCache } from "@apollo/client";

export function createClient() {
  return new ApolloClient({
    uri: "<snip>",
    cache: new InMemoryCache(),
  });
}

The dependencies of note in my package-json are:

"graphql": "^16.6.0",
"@apollo/client": "^3.7.10",
"react": "18.1.0",
"react-native": "0.70.6",
"typescript": "^4.9.5"

I have tried adding the cjs and mjs files to metro so that they can be interpreted:

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

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

But this hasn't helped with the issue at all, nor has downgrading graphql to 15.8.0 as stated here: https://www.apollographql.com/docs/react/get-started/

[phryneas]

Can you reproduce that issue in our React Native error-reproduction example app?
https://github.com/apollographql/rn-apollo-client-testbed

Or, maybe looking at that even already helps you to see if something is wrong on your side? 🤞

[83naff]

Can you reproduce that issue in our React Native error-reproduction example app? https://github.com/apollographql/rn-apollo-client-testbed

Or, maybe looking at that even already helps you to see if something is wrong on your side? 🤞

Cheers for getting back to me - I'll see what I can do to try reproducing it on that repo.

[lmcgartland]

Also seeing this issue using vite 4 + sveltekit in dev mode

[phryneas]

@lmcgartland Could you please create a reproduction of this that we can investigate?

[ggchicote]

I was facing exactly the same issue till I downgrade my @apollo/client library to 3.7.2. I was using 3.7.10-

[phryneas]

@ggchicote I might sound like a broken record here, but:
Could you please create a reproduction of this that we can investigate?

We are not seeing this problem. We cannot help anyone until we are shown how exactly it occurs.

[lmcgartland]

@lmcgartland Could you please create a reproduction of this that we can investigate?

I will do my best to get around to that as soon as possible. In the meantime, I was able to work around the issue by importing directly from the common js files instead of the es modules.

[alessbell]

Hi all 👋 This is due to the way the Metro bundler supports .cjs and .mjs files.

I've added a section to our React Native docs: https://www.apollographql.com/docs/react/integrations/react-native/#troubleshooting:

This is due to the way the Metro bundler supports .cjs and .mjs files: it requires additional configuration to implicitly resolve files with these extensions, so import { ApolloClient, InMemoryCache } from '@apollo/client' will result in an error. You can amend your import statement to e.g. import { ApolloClient, InMemoryCache } from '@apollo/client/main.cjs', or you can install @expo/metro-config and configure their implicit resolution via metro.config.js in the root of your project:

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

const config = getDefaultConfig(__dirname);

config.resolver.sourceExts.push(
  'cjs'
);

module.exports = config;

[github-actions]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
For general questions, we recommend using StackOverflow or our discord server.