Main module field cannot be resolved after installing @apollo/client

Question

I'm running into an error after installing Apollo when trying to run my React Native Expo app. I've tried deleting node-modules and re-installing, resetting cache, restarting computer, and still no luck.

Android Bundling failed 456ms While trying to resolve module @apollo/client from file >/mnt/c/Users/14044/Desktop/Coding/divii/client/App.tsx, the package >/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/package.json >was successfully found. However, this package itself specifies a main module field that >could not be resolved >(/mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs. Indeed, none of these files exist:

• /mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)
• /mnt/c/Users/14044/Desktop/Coding/divii/client/node_modules/@apollo/client/main.cjs/index(.native|.android.jsx|.native.jsx|.jsx|.android.js|.native.js|.js|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx|.android.json|.native.json|.json)

Answer 1

This is a conflict between @apollo/client v3.5.4 and RN metro bundler.

As a workaround until this issue is resolved, you can configure Metro by creating a metro.config.js file in the root of your React Native project with following content:

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

This workaround was posted on Apollo Github Releases page here.

Answer 2

Try downgrading to @apollo/client 3.4.16. I just did a round of package updates and the 3.5.4 broke my build as well. I'm using the downgraded package with a downgraded version of graphql lib as well -- 15.7.2.

Those are the last versions that worked for me with the current version of Expo / RN.

Hope that helps you out!

Answer 3

This is an issue with the latest version of Apollo Client (3.5.0 and up) and the way Metro bundler works. You need to configure Metro to understand the .cjs files used in @apollo/client by creating a metro.config.js in the root folder of your project.

Here is the link to a solution on the Apollo releases page.

I tried the solution, it didn't work, the error was solved, but the build broke for other packages in the project, so I tried a similar but different approach

Here is my metro.config.js

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

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

Answer 4

For anyone using Expo and the new Apollo Client, you should update your metro.config.js to look like this:

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

const defaultConfig = getDefaultConfig(__dirname);

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

module.exports = defaultConfig;

It's important to make sure you use the expo metro config defaults otherwise eas will complain at build time.

Answer 5

Had the same issue in a Vanilla/Bare React Native Project with Apollo Client 3.5.8

The project already had the default metro.config.js

I just modified it to the following code :

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

With this change the issue was resolved