question-mark
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.

TypeScript error when using client without react

See original GitHub issue

Intended outcome: Using the client without react should not result in an error. Note I do NOT want to enable skipLibCheck as this could hide actual problems.

Actual outcome: The following errors occur:

node_modules/@apollo/client/utilities/observables/Observable.d.ts:1:8 - error TS1259: Module '".../node_modules/@types/zen-observable/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flag

1 import Observable from 'zen-observable';
         ~~~~~~~~~~

  node_modules/@types/zen-observable/index.d.ts:69:1
    69 export = Observable;
       ~~~~~~~~~~~~~~~~~~~~
    This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.

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

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

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

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

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

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

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

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

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

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

How to reproduce the issue: Reproduction repo: https://github.com/MatthiasKunnen/apollo-client-no-react-reproduction.

Versions

  System:
    OS: Linux 5.0 Ubuntu 18.04.5 LTS (Bionic Beaver)
  Binaries:
    Node: 12.18.0 - ~/.nvm/versions/node/v12.18.0/bin/node
    Yarn: 1.22.0 - ~/.nvm/versions/node/v12.18.0/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v12.18.0/bin/npm
  Browsers:
    Chrome: 85.0.4183.83
    Firefox: 80.0.1
  npmPackages:
    @apollo/client: ^3.1.5 => 3.1.5 
    apollo-angular: ^2.0.0 => 2.0.4 
    apollo-link-scalars: ^1.0.1 => 1.0.1 
    typescript: 4.0.2

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:30
  • Comments:12 (2 by maintainers)

github_iconTop GitHub Comments

128reactions
benjamncommented, Sep 11, 2020

Instead of importing from @apollo/client, you can import from @apollo/client/core to get everything except the React-dependent stuff.

13reactions
MatthiasKunnencommented, Sep 11, 2020

That fixes all the react issues, thanks!

The downside here is that the TypeScript import helper will import only from @apollo/client so it would be required to add a linter rule banning imports of @apollo/client to prevent people from mistakenly using the wrong import. Could this be changed so that react specific imports come from @apollo/client/react?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Apollo Client Error: Could not find "client" in the context or ...
I am currently trying to get create an app with React and Apollo. When I start my application, I am getting the following...
Read more >
TypeScript with Apollo Client - Apollo GraphQL Docs
This function enables us to type the variables that go into our React hooks, along with the results from those hooks. useQuery. Below...
Read more >
Cannot use import statement outside a module [React ...
This error might be raised when using either JavaScript or TypeScript in the back-end. So you could be working on the client side...
Read more >
GraphQL error handling to the max with Typescript, codegen ...
Contrary to REST, GraphQL does not use Status Code to ... it makes the client code future-proof in case one more error is...
Read more >
Apollo Server Errors for Clients with TypeScript
Here I have a resolver for coupon code redemption. It should throw an error when the code doesn't exist or has a claim....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found