Module not found: Error: Can't resolve 'react' on Angular project

[patolax]

Issue Description

I am getting this error on angular 14. Why would it ask about react in angular project? I also tried installing react but it did not work.

./node_modules/@apollo/client/react/context/ApolloConsumer.js:2:0-31 - Error: Module not found: Error: Can't resolve 'react'

Error: node_modules/@apollo/client/react/context/ApolloConsumer.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

Error: node_modules/@apollo/client/react/context/ApolloConsumer.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from 'react';
                         ~~~~~~~

Error: node_modules/@apollo/client/react/context/ApolloContext.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from 'react';
                         ~~~~~~~

Error: node_modules/@apollo/client/react/context/ApolloProvider.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from 'react';
                         ~~~~~~~

Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:1:23 - error TS2688: Cannot find type definition file for 'react'.

1 /// <reference types="react" />
                        ~~~~~

Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:15:62 - error TS2503: Cannot find namespace 'React'.

15     addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode;
                                                                ~~~~~

Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:15:80 - error TS2503: Cannot find namespace 'React'.

15     addQueryPromise(queryInstance: QueryData, finish?: () => React.ReactNode): React.ReactNode;
                                                                                  ~~~~~

Error: node_modules/@apollo/client/react/ssr/RenderPromises.d.ts:16:131 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

16     addObservableQueryPromise<TData, TVariables extends OperationVariables>(obsQuery: ObservableQuery<TData, TVariables>): import("react").ReactNode;
                                                                                                                                     ~~~~~~~

Error: node_modules/@apollo/client/react/ssr/getDataFromTree.d.ts:1:24 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import * as React from 'react';
                         ~~~~~~~

Error: node_modules/@apollo/client/react/ssr/renderToStringWithData.d.ts:1:30 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import { ReactElement } from 'react';
                               ~~~~~~~

Error: node_modules/@apollo/client/react/types/types.d.ts:1:27 - error TS2307: Cannot find module 'react' or its corresponding type declarations.

1 import { ReactNode } from 'react';
                            ~~~~~~~

Error: node_modules/@apollo/client/react/types/types.d.ts:116:63 - error TS2503: Cannot find namespace 'JSX'.

116     children?: null | ((result: SubscriptionResult<TData>) => JSX.Element | null);
                         ~~~~~~~

package.json

"dependencies": { "@angular-material-components/datetime-picker": "^8.0.0", "@angular/animations": "^14.2.12", "@angular/cdk": "^14.2.7", "@angular/common": "^14.2.12", "@angular/compiler": "^14.2.12", "@angular/core": "^14.2.12", "@angular/forms": "^14.2.12", "@angular/material": "^14.2.7", "@angular/platform-browser": "^14.2.12", "@angular/platform-browser-dynamic": "^14.2.12", "@angular/platform-server": "^14.2.12", "@angular/router": "^14.2.12", "@angularclass/hmr": "^3.0.0", "@angularclass/hmr-loader": "^3.0.2", "@aspnet/signalr": "^1.0.27", "@asymmetrik/ngx-leaflet": "^14", "@asymmetrik/ngx-leaflet-draw": "^14", "@asymmetrik/ngx-leaflet-markercluster": "^14", "@ngrx/effects": "14", "@ngrx/entity": "14", "@ngrx/router-store": "14", "@ngrx/schematics": "14", "@ngrx/store": "14", "@ngrx/store-devtools": "14", "angular-auth-oidc-client": "13.1.0", "angular-split": "^14.1.0", "chart.js": "^3.9.1", "core-js": "^3.10.0", "file-saver": "^2.0.5", "guid-typescript": "^1.0.9", "hammerjs": "^2.0.8", "jsrsasign": "^10.4.0", "jszip": "^3.10.1", "karma-coverage": "^2.2.0", "leaflet": "^1.5.1", "leaflet-deepzoom": "^2.0.0", "leaflet-draw": "1.0.2", "leaflet-draw-drag": "^0.4.5", "leaflet-minimap": "^3.6.1", "leaflet-mouse-position": "^1.2.0", "leaflet-path-drag": "^1.1.0", "leaflet.markercluster": "^1.4.1", "lodash": "^4.17.21", "material-design-icons": "^3.0.1", "ng2-charts": "^3.1.2", "ngrx-store-freeze": "^0.2.4", "ngrx-store-logger": "^0.2.4", "ngx-color-picker": "^13.0.0", "ngx-odata-v4": "^1.1.1", "ngx-papaparse": "^6.0.2", "normalize.css": "^8.0.1", "roboto-fontface": "^0.10.0", "rxjs": "^7.8.0", "text-mask-core": "^5.1.2", "ts-date": "^3.0.2", "tslib": "^2.0.0", "zone.js": "^0.12.0", "@apollo/client": "3.7.12", "apollo-angular": "4.2.1", "graphql": "16.6.0" },

Link to Reproduction

NA

Reproduction Steps

No response

[phryneas]

You won't need react itself, but some of our TypeScript declarations reference it - you should be good if you install @types/react only. That will also not have any impact on your bundle size or bundled runtime code in general!

[patolax]

still getting the same error, I could not use ng add apollo-angular in this project. But I created a fresh angular project and used the command, things seem to work fine.

Why do we get react errors in my existing project

[jerelmiller]

Hey @patolax 👋

You'll need to import from @apollo/client/core to get this to work correctly. We've had other issues that point this out as well. This is something we are changing in v4 as its fairly confusing for projects that aren't using React, such as yours.

Hope that helps!

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. For general questions, we recommend using StackOverflow or our discord server.