TypeScript error when using client without react
See original GitHub issueIntended 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:
- Created 3 years ago
- Reactions:30
- Comments:12 (2 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Instead of importing from
@apollo/client
, you can import from@apollo/client/core
to get everything except the React-dependent stuff.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
?