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)

Ornamentation

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.

Retroactive

doesnt solve the problem – Mickiemickle

@LukAron it has solved this problem for me... it did absolutely nothing to you? did not even changed the error? – Retroactive

It didn't work for me at first, I changed metro.config.js and tried on my emulator. Same error. But then I closed metro and re-opened and it worked! – Egotism

Answer 2

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

Monocarpic

Answer 3

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!

Antonyantonym

works, but cannot be used together with https://mcmap.net/q/481227/-main-module-field-cannot-be-resolved-after-installing-apollo-client – Mickiemickle

Nice! any idea what is actually causing this problem? – Paulo

This was the trick. – Roomy

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.

Norval

Thank you. This seemed to work best for me in an expo bare app. – Schexnayder

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

Noto