CODEWITHSUNDEEP
react-nativeapollo-client
BraveEvidence
BraveEvidence

Reputation: 85

Unable to resolve module for Apollo Client version 3

I just upgraded to apollo/client version 3

enter image description here

I have removed all other apollo dependnecies like apollo hooks etc and I am importing everything from the apollo/client itself.

My App.js file looks as follows in my react native project

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {ApolloProvider} from 'apollo/client';
import TodoStack from './src/components/TodoStack';
import client from './src/client/ApolloClient';

export default () => {
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        <TodoStack />
      </NavigationContainer>
    </ApolloProvider>
  );
};

But when I run my app I get an error saying

enter image description here

I tried removing following steps as well

watchman watch-del-all
rm -rf node_modules and run yarn install
yarn start --reset-cache
rm -rf /tmp/metro-*

Upvotes: 0

Views: 2859

Answers (2)

Daniel
Daniel

Reputation: 8647

Sorry for offtopic, but I had similar error with correct @apollo/client.

While trying to resolve module `@apollo/client/link/ws` from file `/media/nvme/pro/virtual_coach/coach-expo/plugins/graphqlClient.ts`, the packag
e `/media/nvme/pro/virtual_coach/coach-expo/node_modules/@apollo/client/link/ws/package.json` was successfully found. However, this package itsel
f specifies a `main` module field that could not be resolved (`/media/nvme/pro/virtual_coach/coach-expo/node_modules/@apollo/client/link/ws/ws.cj
s`. Indeed, none of these files exist:                                  

  * /media/nvme/pro/virtual_coach/coach-expo/node_modules/@apollo/client/link/ws/ws.cjs(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|
.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
  * /media/nvme/pro/virtual_coach/coach-expo/node_modules/@apollo/client/link/ws/ws.cjs/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx
|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)

I posting solution for other that have this strange error message.

I compared corect package.json from /node_modules/@apollo/client/link/ws/package.json

{
  "name": "@apollo/client/link/ws",
  "main": "ws.cjs.js",
  "module": "index.js",
  "types": "index.d.ts",
  "sideEffects": false
}

with package.json that throw error

{
  "name": "@apollo/client/link/ws",
  "type": "module",
  "main": "ws.cjs",
  "module": "index.js",
  "types": "index.d.ts",
  "sideEffects": false
}

In error message there is a long list of possible extensions. But without .cjs. In project where I can see error there are files in package directory

index.d.ts  index.d.ts.map  index.js  index.js.map  package.json  ws.cjs  ws.cjs.map

but in correct project there is also wc.cjs.js.

So probably in new package version build js file was removed and because of not package.json hat type: module.

Finally i downgraded @apollo/client changing version in package.json from

    "@apollo/client": "^3.4.8",

to fixed:

    "@apollo/client": "3.4.8",

Upvotes: 0

Steven Bell
Steven Bell

Reputation: 1979

You need to import ApolloProvider from '@apollo/client' instead of 'apollo/client'.

The @ is important here.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {ApolloProvider} from '@apollo/client';
import TodoStack from './src/components/TodoStack';
import client from './src/client/ApolloClient';

export default () => {
  return (
    <ApolloProvider client={client}>
      <NavigationContainer>
        <TodoStack />
      </NavigationContainer>
    </ApolloProvider>
  );
};

Upvotes: 2

Related Questions