ApolloProvider causes ReactElementValidator to throw type is invalid error

[Rastamafugg-zz]

I'm trying to set up the Apollo Client into an existing React/Redux app but when I try to render the ApolloProvider element, I get the following error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

When I step into the createElement function code generating the problem, I can see that the type parameter is the ApolloProvider instance, which is a React Component, but the validType logic only appears to accept the type parameter as a string or function (See snippet below). I don't get how this is happening.

createElement: function (type, props, children) {
    var validType = typeof type === 'string' || typeof type === 'function';

[tmeasday]

What does your JSX look like?

[Rastamafugg-zz]

Here is my root component. I also tried removing the customized store parameter from the ApolloPorivder, in case is was related to that, and I still get the same error.

import React from 'react'
import { render } from 'react-dom'
import configureStore from './store/configure-store'
import ApolloClient from 'apollo-client'
import ApolloProvider from 'react-apollo'
import routes from './routes'
import { Router, browserHistory } from 'react-router'

const client = new ApolloClient();

const store = configureStore(undefined, client);

render(
    <ApolloProvider store={store} client={client}>
      <Router history={browserHistory} routes={routes} />
    </ApolloProvider>,
    document.getElementById('root')
);

[jbaxleyiii]

import { ApolloProvider }

On Sat, Jan 14, 2017, 10:10 PM Jason Ross notifications@github.com wrote:

Here is my root component. I also tried removing the customized store parameter from the ApolloPorivder, in case is was related to that, and I still get the same error. ` import React from 'react' import { render } from 'react-dom' import configureStore from './store/configure-store' import ApolloClient from 'apollo-client' import ApolloProvider from 'react-apollo' import routes from './routes' import { Router, browserHistory } from 'react-router'

const client = new ApolloClient();

const store = configureStore(undefined, client);

render(

, document.getElementById('root') ); `

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/apollostack/react-apollo/issues/414#issuecomment-272670404, or mute the thread https://github.com/notifications/unsubscribe-auth/AEvMsBEZpdQAt6AkyYu9hCjL1CMEkhK6ks5rSY42gaJpZM4LiJh_ .

[Rastamafugg-zz]

Yup, that was it. Thanks! That is an easy mistake to make, though, considering ApolloClient is a straight import, and ApolloProvider requires destructuring. It'd be nice to have a heads up in the documentation.

[colllin]

Leaving this for other people who find this issue:

I ran into this because I was trying to import { ApolloProvider } from 'apollo-client' rather than from 'react-apollo'. That's a little confusing... maybe apollo-client should be called apollo-clientless? Anyway, working now. You can also import ApolloClient from there, i.e. import {ApolloClient, ApolloProvider} from 'react-apollo'.