CODEWITHSUNDEEP
reactjsapolloapollo-clientreact-railsapollo-boost
Hinesh Patel
Hinesh Patel

Reputation: 1251

Apollo Client: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)

I am using the React Rails gem to server side render my react app. When I turn prerender off, it works fine. But when I switch prerender on I get the following error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Here is my client.js

import ApolloClient from 'apollo-boost';
import { typeDefs } from './resolvers';

export const client = new ApolloClient({
  clientState: {
    typeDefs,
  },
});

And here is my post builder app component:

import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import AppContext from '../utilities/appContext';
import { client } from './PostContentBuilder/utils/client'

const postContentBuilderApp = (props) => (
  <AppContext.Provider
    value={{
      propsFromRails: props,
    }}
  >
    <ApolloProvider client={client}>
      <h1>Post</h1>
    </ApolloProvider>
  </AppContext.Provider>
);

export default postContentBuilderApp;

And this is how I render this component on my rails view:

<%= react_component("PostContentBuilderApp", post_content_builder_props, {prerender: true}) %>

Any ideas as to what could be causing this?

Upvotes: 0

Views: 335

Answers (1)

Hinesh Patel
Hinesh Patel

Reputation: 1251

I figured the issue out I had to add import 'whatwg-fetch' in the application entry file:

import 'whatwg-fetch';
import React from 'react';
import { ApolloProvider } from '@apollo/react-hooks';
import AppContext from '../utilities/appContext';
import { client } from './PostContentBuilder/utils/client'

const postContentBuilderApp = (props) => (
  <AppContext.Provider
    value={{
      propsFromRails: props,
    }}
  >
    <ApolloProvider client={client}>
      <h1>Post</h1>
    </ApolloProvider>
  </AppContext.Provider>
);

export default postContentBuilderApp;

Upvotes: 0

Related Questions