CODEWITHSUNDEEP
react-nativenpmexpobundlerapollo-client
May
May

Reputation: 321

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

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)

Upvotes: 29

Views: 12289

Answers (5)

Learner4Ever
Learner4Ever

Reputation: 21

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

Upvotes: 2

mylescc
mylescc

Reputation: 6859

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.

Upvotes: 6

Daniel
Daniel

Reputation: 330

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

Upvotes: 9

Erick Riva
Erick Riva

Reputation: 435

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.

Upvotes: 33

Shane Jeffery
Shane Jeffery

Reputation: 91

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!

Upvotes: 8

Related Questions