Question

我正在使用React Rails gem在服务器端渲染我的React应用。当我关闭预渲染时，它可以正常工作。但是当我打开prerender时，出现以下错误：

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,
  },
});

这是我的Post Builder应用程序组件：

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}) %>

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

Answer 1

我发现必须在应用程序入口文件中添加导入“ 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;

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

1 个答案: