Apollo 客户端：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）答案

【问题标题】：Apollo Client: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components)Apollo 客户端：错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件）
【发布时间】：2020-04-14 17:54:16
【问题描述】：

我正在使用 React Rails gem 来服务器端渲染我的反应应用程序。当我关闭预渲染时，它工作正常。但是当我打开预渲染时，我收到以下错误：

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

这是我的client.js

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

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

这是我的帖子构建器应用程序组件：

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;

这就是我在 Rails 视图上呈现此组件的方式：

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

关于什么可能导致这种情况的任何想法？

【问题讨论】：

你在哪里得到这个错误？
当我尝试加载页面时，prerenders 组件
我的意思是问你得到这个错误的行号你能把完整的错误跟踪吗？

标签： reactjs apollo apollo-client react-rails apollo-boost

【解决方案1】：

我发现我必须在应用程序入口文件中添加 import 'whatwg-fetch'：

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;

【讨论】：