apollo-client require `react` ??

[yaquawa]

I got this error when compiling with WebPack 5.
I'm using vue, does this mean the apollo-client require react as a dependency?

 error  in ./node_modules/@apollo/client/react/context/ApolloConsumer.js

Module not found: Error: Can't resolve 'react' in '/Users/x/node_modules/@apollo/client/react/context'

 error  in ./node_modules/@apollo/client/react/hooks/useApolloClient.js

Module not found: Error: Can't resolve 'react' in '/Users/x/node_modules/@apollo/client/react/hooks'

 error  in ./node_modules/@apollo/client/react/hooks/utils/useBaseQuery.js

Module not found: Error: Can't resolve 'react' in '/Users/x/node_modules/@apollo/client/react/hooks/utils'

[baruchvlz]

It's a peer dependency.

[skourismanolis]

@yaquawa did you find a way to fix this without adding react as an (unnecessary) dependency?

[yaquawa]

@skourismanolis No, it requires react even if you don't use react at all... it really shouldn't force users to use react.

[baruchvlz]

@yaquawa Have you tried using VueApollo ?

[yaquawa]

@baruchvlz I'm using it now. it requires apollo-client.

[victorgarciaesgi]

Is there a way to remove react from the dependencies if we are not using it?

[skourismanolis]

@victorgarciaesgi I suppose you could fork the repo and remove the dependency from package.json but that's now a good long-term solution

What really must happen is since the apollo-client package is not supposed to be react-specific, any such functionality should be moved to a new package as a breaking change of a major update. But that's up to the apollo team and how they want to handle it.

[yaquawa]

This takes extra 298 kB if you don't use react. which is nonsense for non-react users.
The team really should program on interface but not the solid implementation of react, just give the user a chance to select the driver to be used.

[victorgarciaesgi]

@yaquawa I completly agree. I use Vue and I just updated to v3 and I want to switch back. Even for Node users this is nonsense

[cmd-johnson]

I just stumbled across that same problem, but I got the client to work without having to install react.
Just import everything you need from @apollo/client/core instead of @apollo/client and you'll be good to go.

It'd be nice to have that documented somewhere, though.

[victorgarciaesgi]

@cmd-johnson I followed the docs here and imported everything from @apollo/client/core too and I still got the missing react error.

import { ApolloClient, InMemoryCache, ApolloLink } from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';
import apolloLogger from 'apollo-link-logger';
import { onError } from '@apollo/client/link/error';
import { createUploadLink } from 'apollo-upload-client';

Is there something i'm missing?

[victorgarciaesgi]

Ok I found it. For anyone having this issue the error comes from apollo-link-logger which required the entire @apollo/client

// node_modules/apollo-link-logger/es/index.js
var _client = require('@apollo/client');

I will open a PR

[yaquawa]

@victorgarciaesgi Thanks that helps!

[ryrych]

These changes made it run:

-import ApolloClient from 'apollo-client'
-import { ApolloLink, concat } from 'apollo-link'
-import { HttpLink } from 'apollo-link-http'
-import { split } from 'apollo-link'
-import { onError } from 'apollo-link-error'
-import { InMemoryCache, defaultDataIdFromObject } from 'apollo-cache-inmemory'
+import { ApolloClient } from '@apollo/client/core'
+import { ApolloLink, HttpLink, split, concat } from '@apollo/client/core'
+import { onError } from '@apollo/client/link/error'
+import { InMemoryCache, defaultDataIdFromObject } from '@apollo/client/cache'

-import gql from "graphql-tag"
+import { gql } from "@apollo/client/core"

_package.json_

-"apollo-boost": "^0.4.9",
-"apollo-cache-inmemory": "^1.6.6",
-"apollo-client": "^2.6.10",
-"apollo-link": "^1.2.14",
-"apollo-link-context": "^1.0.20",
-"apollo-link-http": "^1.5.17",
-"apollo-link-ws": "^1.0.20",
-"apollo-utilities": "^1.3.4",
-"graphql": "^15.3.0",
-"graphql-tag": "^2.11.0",
+"@apollo/client": "^3.3.2",
+"graphql": "^15.4.0",

[Yohandah]

I'm having this issue as well using @apollo/client in my Angular project.

Importing from @apollo/client/core fixes the problem but I'm unsure why ... I think Apollo shouldn't rely on react since it's an optional peer dependency