Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

@apollo/client not compiling on angular

See original GitHub issue

Intended outcome: Connect to aws-appsync with @apollo/client

Actual outcome: After adding @apollo/client to the project the project compilation fails with below errors:


ERROR in node_modules/@apollo/client/utilities/common/mergeDeep.d.ts:4:52 - error TS2344: Type 'string | number' does not satisfy the constraint 'string'.
  Type 'number' is not assignable to type 'string'.

4 declare function isObject(obj: any): obj is Record<string | number, any>;
                                                     ~~~~~~~~~~~~~~~
node_modules/@apollo/client/utilities/common/mergeDeep.d.ts:5:118 - error TS2344: Type 'string | number' does not satisfy the constraint 'string'.
  Type 'number' is not assignable to type 'string'.

5 export declare type ReconcilerFunction<TContextArgs extends any[]> = (this: DeepMerger<TContextArgs>, target: Record<string | number, any>, source: Record<string | number, any>, property: string | number, ...context: TContextArgs) => any;
                                                                                                                       ~~~~~~~~~~~~~~~
node_modules/@apollo/client/utilities/common/mergeDeep.d.ts:5:156 - error TS2344: Type 'string | number' does not satisfy the constraint 'string'.
  Type 'number' is not assignable to type 'string'.

5 export declare type ReconcilerFunction<TContextArgs extends any[]> = (this: DeepMerger<TContextArgs>, target: Record<string | number, any>, source: Record<string | number, any>, property: string | number, ...context: TContextArgs) => any;
                                                                                                                                                             ~~~~~~~~~~~~~~~
node_modules/@apollo/client/react/context/ApolloConsumer.d.ts:1:19 - error TS2307: Cannot find module 'react'.

1 import React from 'react';
                    ~~~~~~~
node_modules/@apollo/client/react/context/ApolloContext.d.ts:1:19 - error TS2307: Cannot find module 'react'.

1 import React from 'react';
                    ~~~~~~~
node_modules/@apollo/client/react/context/ApolloProvider.d.ts:1:19 - error TS2307: Cannot find module 'react'.

1 import React from 'react';
                    ~~~~~~~
node_modules/@apollo/client/react/types/types.d.ts:2:27 - error TS2307: Cannot find module 'react'.

2 import { ReactNode } from 'react';
                            ~~~~~~~
node_modules/@apollo/client/react/types/types.d.ts:145:63 - error TS2503: Cannot find namespace 'JSX'.

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

How to reproduce the issue: add @apollo/client to an angular 9 project.

Versions System: OS: macOS 10.15.6 Binaries: Node: 12.18.3 - /usr/local/bin/node npm: 6.14.8 - /usr/local/bin/npm Browsers: Chrome: 86.0.4240.198 Firefox: 83.0 Safari: 13.1.2 npmPackages: @apollo/client: ^3.2.9 => 3.2.9

Issue Analytics

State:
Created 3 years ago
Comments:8 (4 by maintainers)

Top GitHub Comments

2reactions

riesetcommented, Sep 15, 2021

This error occurs if you use an import in modules:

import { ApolloLink, ... } from '@apollo/client';

You should use a more specific import

 import { ApolloLink, ... } from '@apollo/client/core';

2reactions

benjamncommented, Nov 30, 2020

@normads I don’t expect this to solve the problem completely, but if you import from @apollo/client/core instead of just @apollo/client, none of the React-related code will be imported/executed, so those errors should disappear, at least.

Do you happen to know what version of TypeScript is used by the version of Angular you’re using? Apollo Client currently assumes you’re using at least TS v3.7.

Top Results From Across the Web

Typescript fail with Apollo Client for Angular 2 - Stack Overflow

I tried to find the answer but everything related to Typescript errors and Apollo Client but I have no good results on it....

Introduction – Angular - GraphQL Code Generator

Write Queries, Not Code ... Apollo Angular is the ultra-flexible, community driven GraphQL client for Angular, JavaScript, and native platforms.

Migrating to Apollo Client 3.0 - Apollo GraphQL Docs

This article walks you through migrating your application to Apollo Client 3.0 from previous versions of Apollo Client. To illustrate the migration process, ......

Angular & Apollo Client: Getting Started with GraphQL in ...

When working with Apollo client in Angular, you might encounter the error Cannot find namespace'JSX' . This happens when you make a wrong ......

Set up a GraphQL client with Apollo - Hasura

You will learn how to configure Apollo Client in Angular by installing dependencies like apollo-angular, @apollo/client.