apollo-client require `react` ?? #7318

yaquawa · 2020-11-12T14:30:29Z

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'

The text was updated successfully, but these errors were encountered:

baruchvlz · 2020-11-12T15:24:32Z

It's a peer dependency.

skourismanolis · 2020-11-17T14:06:02Z

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

yaquawa · 2020-11-17T17:06:08Z

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

baruchvlz · 2020-11-17T17:43:59Z

@yaquawa Have you tried using VueApollo ?

yaquawa · 2020-11-17T18:43:00Z

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

victorgarciaesgi · 2020-11-24T18:04:03Z

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

skourismanolis · 2020-11-25T18:04:13Z

@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 · 2020-11-25T19:24:22Z

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 · 2020-11-25T19:26:05Z

@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 · 2020-11-26T17:43:46Z

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 · 2020-11-26T21:39:59Z

@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 · 2020-11-26T22:10:41Z

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 · 2020-11-27T06:14:42Z

@victorgarciaesgi Thanks that helps!

ryrych · 2020-12-02T09:45:29Z

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 · 2020-12-21T17:07:40Z

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

fenilli · 2021-03-12T21:10:01Z

The problem is that @apollo/client exports from ./react and ./core.

It makes sense if the package is react friendly and as bonus works for other frameworks, but if the package intentions are to be framework free, it should only export from ./core and make react users import from @apollo/client/react instead.

fenilli · 2021-03-15T21:36:28Z

The problem is that @apollo/client exports from ./react and ./core.

It makes sense if the package is react friendly and as bonus works for other frameworks, but if the package intentions are to be framework free, it should only export from ./core and make react users import from @apollo/client/react instead.

After trying to find how to run a query and mutation using the docs, I found out that everything is based on react, so probably this package is meant to be used only with react, and as bonus it works for other frameworks too.

Sadly the docs are lacking on how to use the ApolloClient without using react hooks, also lacking in how to use the package without react at all ( where you get that you need to use @apollo/client/core is in the migration from 2.x, that makes no sense ).

So I would suggest to improve the documentation a little bit with a section on how to use this package without react and also on how to use queries, mutations and so on ( doesn't need to be focused on frontend frameworks, just on which method to use and its properties ).

Edit: There is a part of documentation on how to use the core apollo/core but it does need improvements, some examples would be helpful, actually good typescript support and not "any" everything and a better explaining about the types "TVariables" what is that? how it works?

I will be studying on how to use it better inside my project so I do undertand it more and will make a PR with hopefully better docs, making the types obvious.

hwillson · 2021-05-15T11:47:57Z

Apollo Client 4 is going to remove React from the default @apollo/client entry point. We're tracking this here: #8190 - thanks!

See: apollographql/apollo-client#7318 (comment)

This is insane but the problem was caused by the old apollo-client dependency which is 3 years old. The error was coming from ts-invariant code here https://github.com/apollographql/invariant-packages/blob/master/packages/ts-invariant/src/invariant.ts#L64 By this change I updated our app to use new @apollo/client dependency but there is one pretty big concern. This lib has react as a peer dependency (what?!) so to avoid adding react to our vue project I had to import needed functionality from @apollo/client/core instead of just @apollo/client. There is a discussion here apollographql/apollo-client#7318 According to this ^ apollo team are going to remove react from their peer dependecies list when apollo V4 will be launched. See apollographql/apollo-client#8190 That's another point why we should move away from using graphql entirely or at least stop using apollo. Issue: #5371 Change-Id: Ifd484efbcd9e99d8c2e21d0dab93670c9358e25c

yaquawa mentioned this issue Dec 24, 2020

Importing from @apollo/client force user to use react awslabs/aws-mobile-appsync-sdk-js#611

Open

disbelief mentioned this issue Feb 12, 2021

Is react a required dependency? timhall/svelte-apollo#82

Open

josemarluedke mentioned this issue Mar 4, 2021

TS errors due to no react present ember-graphql/ember-apollo-client#383

Closed

hwillson closed this as completed May 15, 2021

delroh mentioned this issue Jun 17, 2021

docs: Update example to apollo-client v3 gatsbyjs/gatsby#29737

Merged

Yohandah mentioned this issue Sep 20, 2021

Import @apollo/client/core unnecessarily require react #8809

Closed

dlebech mentioned this issue Jan 14, 2022

Support sveltekit (vite) #8218

Open

bennypowers mentioned this issue Apr 18, 2022

Not able to configure Apollo Elements apollo-elements/apollo-elements#245

Closed

This was referenced Aug 16, 2022

fix(subscription): update request return type correctly match apollo-link awslabs/aws-mobile-appsync-sdk-js#727

Closed

Fixed issues when using with Angular awslabs/aws-mobile-appsync-sdk-js#731

Merged

hettiger added a commit to hettiger/ngx-spa-honeypot that referenced this issue Nov 27, 2022

Fix Module not found: Error: Can't resolve 'react' errors

b40ac3f

See: apollographql/apollo-client#7318 (comment)

vtereshyn mentioned this issue Dec 13, 2022

graphql-tools/links – AwaitVariablesLink doesn't have properties from ApolloLink ardatan/graphql-tools#4897

Closed

4 tasks

This was referenced Dec 13, 2022

fix: apollo-client always requires React to be installed ardatan/graphql-tools#4900

Closed

@apollo/client requires React to be installed when using @graphql-tools/links ardatan/graphql-tools#4901

Closed

github-actions bot locked as resolved and limited conversation to collaborators Feb 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

apollo-client require `react` ?? #7318

apollo-client require `react` ?? #7318

yaquawa commented Nov 12, 2020 •

edited

Loading

baruchvlz commented Nov 12, 2020

skourismanolis commented Nov 17, 2020

yaquawa commented Nov 17, 2020 •

edited

Loading

baruchvlz commented Nov 17, 2020 •

edited

Loading

yaquawa commented Nov 17, 2020 •

edited

Loading

victorgarciaesgi commented Nov 24, 2020

skourismanolis commented Nov 25, 2020

yaquawa commented Nov 25, 2020 •

edited

Loading

victorgarciaesgi commented Nov 25, 2020

cmd-johnson commented Nov 26, 2020 •

edited

Loading

victorgarciaesgi commented Nov 26, 2020

victorgarciaesgi commented Nov 26, 2020

yaquawa commented Nov 27, 2020

ryrych commented Dec 2, 2020 •

edited

Loading

Yohandah commented Dec 21, 2020 •

edited

Loading

fenilli commented Mar 12, 2021

fenilli commented Mar 15, 2021 •

edited

Loading

hwillson commented May 15, 2021

apollo-client require react ?? #7318

apollo-client require react ?? #7318

Comments

yaquawa commented Nov 12, 2020 • edited Loading

baruchvlz commented Nov 12, 2020

skourismanolis commented Nov 17, 2020

yaquawa commented Nov 17, 2020 • edited Loading

baruchvlz commented Nov 17, 2020 • edited Loading

yaquawa commented Nov 17, 2020 • edited Loading

victorgarciaesgi commented Nov 24, 2020

skourismanolis commented Nov 25, 2020

yaquawa commented Nov 25, 2020 • edited Loading

victorgarciaesgi commented Nov 25, 2020

cmd-johnson commented Nov 26, 2020 • edited Loading

victorgarciaesgi commented Nov 26, 2020

victorgarciaesgi commented Nov 26, 2020

yaquawa commented Nov 27, 2020

ryrych commented Dec 2, 2020 • edited Loading

Yohandah commented Dec 21, 2020 • edited Loading

fenilli commented Mar 12, 2021

fenilli commented Mar 15, 2021 • edited Loading

hwillson commented May 15, 2021

apollo-client require `react` ?? #7318

apollo-client require `react` ?? #7318

yaquawa commented Nov 12, 2020 •

edited

Loading

yaquawa commented Nov 17, 2020 •

edited

Loading

baruchvlz commented Nov 17, 2020 •

edited

Loading

yaquawa commented Nov 17, 2020 •

edited

Loading

yaquawa commented Nov 25, 2020 •

edited

Loading

cmd-johnson commented Nov 26, 2020 •

edited

Loading

ryrych commented Dec 2, 2020 •

edited

Loading

Yohandah commented Dec 21, 2020 •

edited

Loading

fenilli commented Mar 15, 2021 •

edited

Loading