React-apollo: [2.1.0-beta.1] @types/prop-types missing

[magicmaaaaan]

Intended outcome:

tsc to not complain about missing types.

Actual outcome:

(3,28): Could not find a declaration file for module 'prop-types'. '<project_root>/node_modules/react-apollo/node_modules/prop-types/index.js' implicitly has an 'any' type.
  Try `npm install @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`

This sounds like the same issue that was in 2.0 with @types/lodash.flowright.

How to reproduce the issue:

Update a project from 2.1.0-beta.0 to 2.1.0-beta.1. tsconfig.js should have either strict or noImplicitAny set to true.

Version

• [email protected]
• [email protected] (from [email protected])

[DogPawHat]

This issue is still in 2.1.0-beta.2

[zamiang]

Confirmed this is still an issue in the released 2.1.0

[roman-16]

Still an issue

[saostad]

Still has problem:
"react-apollo": "^2.1.4",
"apollo-client": "^2.3.2",

[pohy]

Happening to me as well with version 2.1.6

[connorjacobsen]

Also a problem in 2.1.11

[lazywei]

any update on this?

[rosskevin]

We have a current green CI build, not sure how this could be an issue at this time unless we have a relevant compilerOption difference. If it is, please ping me and I'll reopen.

[elliottsj]

To reproduce this issue:

npm install react-apollo apollo-client apollo-cache react react-dom graphql typescript
./node_modules/.bin/tsc --noImplicitAny --noEmit --lib 'esnext' ./node_modules/react-apollo/index.d.ts

Expand errors

node_modules/apollo-client/ApolloClient.d.ts:2:47 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { ExecutionResult, DocumentNode } from 'graphql';
                                                ~~~~~~~~~

node_modules/apollo-client/core/LocalState.d.ts:1:67 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { ExecutionResult, DocumentNode, FieldNode, ASTNode } from 'graphql';
                                                                    ~~~~~~~~~

node_modules/apollo-client/core/ObservableQuery.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { GraphQLError } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/core/QueryManager.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/core/types.d.ts:2:44 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode, GraphQLError } from 'graphql';
                                             ~~~~~~~~~

node_modules/apollo-client/core/watchQueryOptions.d.ts:1:47 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode, ExecutionResult } from 'graphql';
                                                ~~~~~~~~~

node_modules/apollo-client/data/mutations.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/data/queries.d.ts:1:61 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode, GraphQLError, ExecutionResult } from 'graphql';
                                                              ~~~~~~~~~

node_modules/apollo-client/data/store.d.ts:1:47 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { ExecutionResult, DocumentNode } from 'graphql';
                                                ~~~~~~~~~

node_modules/apollo-client/errors/ApolloError.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { GraphQLError } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-cache/lib/cache.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-cache/lib/types/DataProxy.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-link/lib/linkUtils.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-link/lib/types.d.ts:2:47 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { ExecutionResult, DocumentNode } from 'graphql';
                                                ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-utilities/lib/directives.d.ts:1:56 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { FieldNode, SelectionNode, DocumentNode } from 'graphql';
                                                         ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-utilities/lib/fragments.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-utilities/lib/getFromAST.d.ts:1:79 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode, OperationDefinitionNode, FragmentDefinitionNode } from 'graphql';
                                                                                ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-utilities/lib/storeUtils.d.ts:1:192 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DirectiveNode, FieldNode, IntValueNode, FloatValueNode, StringValueNode, BooleanValueNode, EnumValueNode, VariableNode, InlineFragmentNode, ValueNode, SelectionNode, NameNode } from 'graphql';
                                                                                                                                                                                                 ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-utilities/lib/transform.d.ts:1:127 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { DocumentNode, DirectiveNode, FragmentDefinitionNode, ArgumentNode, FragmentSpreadNode, VariableDefinitionNode } from 'graphql';
                                                                                                                                ~~~~~~~~~

node_modules/apollo-client/node_modules/apollo-utilities/lib/util/errorHandling.d.ts:1:33 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

1 import { ExecutionResult } from 'graphql';
                                  ~~~~~~~~~

node_modules/react-apollo/ApolloConsumer.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/ApolloProvider.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/ApolloProvider.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'prop-types'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react-apollo/node_modules/prop-types/index.js' implicitly has an 'any' type.
  Try `npm install @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`

2 import * as PropTypes from 'prop-types';
                             ~~~~~~~~~~~~

node_modules/react-apollo/ApolloProvider.d.ts:3:27 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

3 import { Component } from 'react';
                            ~~~~~~~

node_modules/react-apollo/getDataFromTree.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/graphql.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/graphql.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/react-apollo/mutation-hoc.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/mutation-hoc.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/react-apollo/Mutation.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/Mutation.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'prop-types'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react-apollo/node_modules/prop-types/index.js' implicitly has an 'any' type.
  Try `npm install @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`

2 import * as PropTypes from 'prop-types';
                             ~~~~~~~~~~~~

node_modules/react-apollo/Mutation.d.ts:5:44 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

5 import { DocumentNode, GraphQLError } from 'graphql';
                                             ~~~~~~~~~

node_modules/react-apollo/query-hoc.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/query-hoc.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/react-apollo/Query.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/Query.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'prop-types'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react-apollo/node_modules/prop-types/index.js' implicitly has an 'any' type.
  Try `npm install @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`

2 import * as PropTypes from 'prop-types';
                             ~~~~~~~~~~~~

node_modules/react-apollo/Query.d.ts:4:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

4 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/react-apollo/renderToStringWithData.d.ts:1:30 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/subscription-hoc.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/subscription-hoc.d.ts:2:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

2 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/react-apollo/Subscriptions.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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

node_modules/react-apollo/Subscriptions.d.ts:2:28 - error TS7016: Could not find a declaration file for module 'prop-types'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react-apollo/node_modules/prop-types/index.js' implicitly has an 'any' type.
  Try `npm install @types/prop-types` if it exists or add a new declaration (.d.ts) file containing `declare module 'prop-types';`

2 import * as PropTypes from 'prop-types';
                             ~~~~~~~~~~~~

node_modules/react-apollo/Subscriptions.d.ts:4:30 - error TS7016: Could not find a declaration file for module 'graphql'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/graphql/index.js' implicitly has an 'any' type.
  Try `npm install @types/graphql` if it exists or add a new declaration (.d.ts) file containing `declare module 'graphql';`

4 import { DocumentNode } from 'graphql';
                               ~~~~~~~~~

node_modules/react-apollo/withApollo.d.ts:1:24 - error TS7016: Could not find a declaration file for module 'react'. '/Users/spencerelliott/Dev/elliottsj/react-apollo-test/node_modules/react/index.js' implicitly has an 'any' type.
  Try `npm install @types/react` if it exists or add a new declaration (.d.ts) file containing `declare module 'react';`

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


Found 44 errors.

It's not only prop-types which has this error, but also graphql and react.

Of course, the workaround for this issue is to have your application declare a dependency on @types/react, @types/prop-types, and @types/graphql:

# ...continued from above
npm install @types/react @types/prop-types @types/graphql
./node_modules/.bin/tsc --noImplicitAny --noEmit --lib 'esnext' ./node_modules/react-apollo/index.d.ts
# should exit 0 with no errors

However, users should not be required to depend on these typedef packages when they use react-apollo in their TypeScript project. As described in TypeScript's "Publishing" guide:

Our package exposes declarations from each of those, so any user of our browserify-typescript-extension package needs to have these dependencies as well. For that reason, we used "dependencies" and not "devDependencies", because otherwise our consumers would have needed to manually install those packages. If we had just written a command line application and not expected our package to be used as a library, we might have used devDependencies.

Suggested fix: react-apollo should declare @types/react, @types/prop-types, and @types/graphql in its "dependencies".