Question

我有一个next应用。应用本身的代码（pages，static等）位于存储库中的文件夹中。称为frontend。该应用程序。本身是由express服务器通过存储库中的另一个文件夹提供的。称为backend。

首先，我不确定将两者分开是否是最佳实践，但我个人喜欢这样做。这两个文件夹都有各自的package.json和package-lock.json文件。

我还通过ApolloServer端点在后端Express服务器上运行/graphql。该应用程序。正常工作，直到我尝试使用react hooks实现组件。即very simple example provided by react-spring，如下所示：

import { useSpring, animated } from 'react-spring'

function App() {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } })
  return <animated.div style={props}>I will fade in</animated.div>
}

我已将其从App重命名为SpringDemo，它在如下所示的页面组件中被简单地调用：

function Home() {
  return (
    <div>
      <SpringDemo />
    </div>
  )
}

export default Home

通过express文件夹中的backend服务器提供我的应用程序时，在浏览器中出现以下错误：

Invariant Violation: Invalid hook call. Hooks can only be called inside of the 
body of a function component. 
This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

您可能使用了不匹配的React和渲染器版本（例如React DOM）

在我各自的package.json文件中，我认为情况并非如此：

frontend/package.json

    "react": "^16.8.5",
    "react-apollo": "^2.5.2",
    "react-dom": "^16.8.5",

backend/package.json

    "react": "^16.8.5",
    "react-dom": "^16.8.5",

所有版本似乎都匹配最新的16.8.5。

您可能正在违反《钩子规则》

react-spring文档中的复制粘贴示例不太可能。

您可能在同一应用中拥有多个React副本

从上面列出的package.json中，我不相信我这样做，但是我不确定。我读了这个https://github.com/facebook/react/issues/14823问题，然后指出了这个https://github.com/apollographql/react-apollo/issues/2792的问题，但是我不确定这是原因。如果确实通过package-lock.json运行react / react-dom的其他版本，那么查看react-apollo文件并不会（至少对我来说）。

检查package.json仓库中的react-apollo。此处：https://github.com/apollographql/react-apollo/blob/master/package.json建议他们运行相同版本的react和react-dom，尽管与上面列出的我的react和react-dom版本不同：

react-apollo/package.json

    "react": "16.8.4",
"react-dom": "16.8.4",

我也不知道这是否与我的react-apollo版本保持一致，或者确实是导致此问题的原因。

如何解决此问题并弄清楚我是否确实在运行react / react-dom的多个副本？对于其他任何基于反应的问题，这对我来说都不是问题。

编辑：

为希望有所帮助，我分别创建了package.json和package-lock.json文件的要点：

frontend/package.json-https://gist.github.com/benlester/c7d82d7ad46cae9b8972284baba003a6

frontend/package-lock.json-https://gist.github.com/benlester/8f85b3fa290e67445ee0b2df365d8307

backend/package.json-https://gist.github.com/benlester/0c8004bdbb5b87c50734ba8044c35cee

backend/package-lock.json-https://gist.github.com/benlester/29f7a25f2ee633a13bdbdcee28270ddf

npm ls react-frontend

frontend@0.0.1 [directory]
└── react@16.8.5

npm ls react-后端与上面相同。

Answer 1

我设法通过更改项目的结构来解决此问题。

我现在在package.json和package-lock.json文件夹中没有单独的frontend和backend，现在我只有一个package.json和{{1} }（在根文件夹中（以及单个package-lock.json文件夹）。

我不知道为什么这可以解决问题，正如我在我的所有node_modules和react版本中似乎在我的问题中所概述的那样，并且我正确地使用了钩子。

我也不特别喜欢这种解决方案，因为它迫使我（至少使用一个回购协议）将单个源用于前端和后端依赖项。

如果有人知道管理前端/后端混合部门的更好方法。我无所适从。

接收错误-在实现React Spring基本示例时，只能在函数组件的内部调用钩子

1 个答案: