Question

简介

在React中非常新鲜，在Next和Apollo中甚至更新鲜，所以我希望您原谅我那直言不讳的求助。我已经尽了最大的努力来解决这个问题。

在此先感谢所有尝试提供帮助的人。

已完成研究

通常的犯罪嫌疑人

React.createElement：类型无效

相对于默认导出，将是{}-但是在这一点上，我没有发现任何错误。

奖励问题：可能记录更具体的错误

我假设下面粘贴的错误是2个单独的错误？获取行号恰好在MyApp（_app.js）中发生此错误的位置会很有趣。为什么没有行号？我可能以错误的方式阅读了此日志。

加载我的应用首页时出错

StripListObject

发出此错误的代码

/pages/_app.js

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
in MyApp
in ApolloProvider
in RenderPromisesProvider
TypeError: Cannot read property 'pathname' of undefined
at makePublicRouterInstance (/node_modules/next/dist/lib/router/index.js:180:37)
at MyApp.getChildContext (/node_modules/next/dist/lib/app.js:55:54)
at processChild (/node_modules/react-dom/cjs/react-dom-server.node.development.js:2878:29)
at resolve (/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
at ReactDOMServerRenderer.render (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
at ReactDOMServerRenderer.read (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
at renderToStaticMarkup (/node_modules/react-dom/cjs/react-dom-server.node.development.js:3541:27)
at process (/node_modules/react-apollo/react-apollo.umd.js:129:24)

/lib/apollo.js

import Layout from "../components/Layout";
import withData from "../lib/apollo";
import App, { Container } from "next/app";
import React from "react";

class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }

  render() {
    const { Component, pageProps, isAuthenticated, ctx } = this.props;
    return (
      <Container>
        <Layout isAuthenticated={isAuthenticated} {...pageProps}>
          <Component {...pageProps} />
        </Layout>

        <style jsx global>
          {`
            a {
              color: white !important;
            }
            a:link {
              text-decoration: none !important;
              color: white !important;
            }
            a:hover {
              color: white;
            }
            .card {
              display: inline-block !important;
            }
            .card-columns {
              column-count: 3;
            }
          `}
        </style>
      </Container>
    );
  }
}
export default withData(MyApp);

package.json（以查看版本）

import { HttpLink } from "apollo-link-http";
import { withData } from "next-apollo";

const config = {
  link: new HttpLink({
    uri: "http://localhost:1337/graphql", // Server URL (must be absolute)
  })
};
export default withData(config);

根据问题进行更新

代码来自这个（很棒的）教程 [@ atav32] [https://blog.strapi.io/strapi-next-setup/] 1

组件/布局的内容 [@ atav32]

 "dependencies": {
    "bootstrap": "^4.1.3",
    "express": "^4.16.4",
    "gql": "^1.1.2",
    "graphql": "^14.0.2",
    "js-cookie": "^2.2.0",
    "jwt-decode": "^2.2.0",
    "next": "^7.0.2",
    "next-apollo": "^2.0.7",
    "react": "^16.7.0",
    "react-apollo": "^2.3.3",
    "react-dom": "^16.7.0",
    "react-stripe-elements": "^2.0.1",
    "reactstrap": "^7.0.2",
    "recompose": "^0.30.0",
    "strapi-sdk-javascript": "^0.3.1"
  }

警告：React.createElement：类型无效

0 个答案: