React + ApolloProvider + Typescript = "JSX element class does not support attributes" error

Question

Hej folks, I'm relatively new to Typescript, I hope I'm not overlooking something obvious, here. :)

I'm trying to add Apollo to a Typescript project, to be able to consume data from a GraphQL API. Here a link to the docs I'm trying to follow.

The issue I'm having is that as soon as I try to use ApolloProvider in my ReactDOM render method, Typescript complains (on the ApolloProvider line) about with the error below..

TS2607:JSX element class does not support attributes because it does not have a 'props' property

import { InMemoryCache } from 'apollo-cache-inmemory';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { ApolloProvider } from 'react-apollo';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './components/08-pages/App';

const client = new ApolloClient({
    cache: new InMemoryCache(),
    link: new HttpLink(),
});

ReactDOM.render(
        <ApolloProvider client={client}>
            <App />
        </ApolloProvider>,
        document.getElementById('root'),
);

Any hint about how to address this issue? Thanks in advance.

Solution

The way you're using ApolloProvider seems all good. This problem happens when TypeScript does the static type checking.

TypeScript was providing static type checking against an unknown type for props and state. In this case it's saying that we can't apply the attributes to the element because we did not provide a generic type P to define what props are allowed to be included.

Please check your App, make sure you define the type for the props or state if necessary. If only props type is needed, say PropsType, then your App definition should be

class App extends React.Component<PropsType, any> {
...
}

Comments

[jj-lucas]

Hej Kevin, Thanks for your suggestions. I tried both, but unfortunately the error persists. :)

[Kevin Li]

Sorry that it does not help, I think it related to typscript static type checking, see my following answer, hopefully it will help you.

[jj-lucas]

I tried to even use "any" as type for the props of App, as follows: export default class App extends React.Component<any, any> { That however did not help either. I'm starting to think this is somehow related to the Typescript compiler used by the IDE: I'm working on PHPStorm. If I open the same project on Webstorm, or Visual Studio Code, the IDE does not complain about this line (or other small issues, which also seem non-issues). I can see that Webstorm is able to load the TS compiler from node_modules (2.8.3), while PHPStorm can't, and uses the one bundled with the IDE (2.2.1)

[jj-lucas]

..and to add more on the subject: This TS warning does not prevent my application from compiling. That's why I believe it might just be the IDE firing a false warning.

[Niklas Hofer]

For those who are still encountering this: Make sure you have **/*.tsx files in your includes list. I had only included **/*.ts which caused the above mentioned error (beside others).