Javascript 进口<；查询>；组件未使用GraphQL和ReactJS定义

我试图在ReactJS中呈现我的HOC函数，但它给了我一个错误。以下是一些片段（为了篇幅和清晰度，我删去了不相关的内容）：

在我的

app.js

组件中，我正在导入我的HOC，如下所示：

import React, { Component } from "react";
import "./App.css";
import { Route, Switch, BrowserRouter as Router } from "react-router-dom";
import Home from "../Home/Home";
import StoriesHOC from "../Story/GetAllStories/Stories";

export default class App extends Component {
 render() {
   return (
  <Router>
    <div>
      <Navigation />
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          path="/all_stories"
          render={() => {
            return <StoriesHOC />;
          }}
        />
         </Switch>
       </div>
    </Router>
   );
 }
}

但是，chrome浏览器中显示的实际错误是：

 Element 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.

 Check the render method of `StoriesHOC`.

随后，它给出了在StoriesHOC函数前面看到的停止位置的行话虽如此，我的问题似乎仅源于这一行，但尽管我一直在全力以赴试图解决这个问题，但我最好的猜测是我在GraphQL查询中出错了，但是当我在后端检查IDE时，它呈现得非常完美

还有一个问题是试图弄清楚我是否在app.js文件中正确导出了导入的函数，但我知道，因为我使用

导出默认函数myFunc

导出，所以它应该作为当前状态导入

---

任何帮助以及建议或批评都将不胜感激。提前谢谢你

如果组件带有剥离代码/内容

export default function StoriesHOC(props) {
  return (
    <Query query={getStories}>
      {({ data }) => {
        console.log(data)
        return <div>fake content</div>
      }
    </Query>
  )
}

导出默认函数StoriesHOC（道具）{
返回(
{（{data}）=>{
console.log（数据）
返回假内容
}
)
}

---

正确呈现，然后查询正常，问题在删除的部分中。逐个恢复它们，以查找/隔离问题的根源。

我发现了我的问题，这是一个过时的npm安装，用于

react apollo、graphql标记和apollo boost。

听起来很明显，这应该是问题的根源第一个地方，我看，但我真的刚刚更新了他们两周前

对于路过的人，这里有一个为我工作的软件包版本的片段：

"dependencies": {
  "apollo-boost": "^0.1.15",
  "cors": "^2.8.4",
  "express": "^4.16.3",
  "graphql": "^0.13.2",
  "graphql-server-express": "^1.4.0",
  "graphql-tag": "^2.9.2",
  "react": "^16.5.0",
  "react-apollo": "^2.1.11",
  "react-dom": "^16.4.2",
  "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.4"
 }

---

错误似乎与JSX标记相关-

StoryShow

是否导出？@xadm据我所知，是的，我编辑了帖子以显示我正在导出它。从

StoriesHOC

中删除

中的所有“body”-呈现一些html，简单的

以检查它是否与子组件或查询相关。查询可以直接从
*导入。graphql`文件。我按照你说的做了，StoriesHOC组件呈现没有问题。我相信我的错误在处的查询组件中，因为当我在浏览器中得到错误时，调试器会将我重定向到该行。对不起，也许我提得不够清楚。我知道错误的来源是实际的
Query={getStories}
组件中的
行，因此我知道问题出在哪里，但我不知道我做错了什么。尝试直接在同一文件中定义
getStories
，不导入。此错误通常与虚拟树/节点/元素相关，而不是参数/道具。我已经按照您的建议执行了，但错误仍然存在，我是fresh目前没有想法。有什么建议吗？如果您愿意，我可以链接我的Github代码
getStories
w/o
query getStories{
问题已经解决。谢谢您的帮助！
 Element 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.

 Check the render method of `StoriesHOC`.

export default function StoriesHOC(props) {
  return (
    <Query query={getStories}>
      {({ data }) => {
        console.log(data)
        return <div>fake content</div>
      }
    </Query>
  )
}

"dependencies": {
  "apollo-boost": "^0.1.15",
  "cors": "^2.8.4",
  "express": "^4.16.3",
  "graphql": "^0.13.2",
  "graphql-server-express": "^1.4.0",
  "graphql-tag": "^2.9.2",
  "react": "^16.5.0",
  "react-apollo": "^2.1.11",
  "react-dom": "^16.4.2",
  "react-router-dom": "^4.3.1",
  "react-scripts": "1.1.4"
 }