zhangyuang/egg-react-ssr

无法在项目中使用react hooks

Closed this issue · 11 comments

pashangshangpo commented

image

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
    egg See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

已经检测过react和react-dom版本，是一致的。

npm ls react-dom
xx@2.3.3 /Users/xx/cj/xx
├── react-dom@16.13.1 -> /Users/xx/xx/xx/node_modules/_react-dom@16.13.1@react-dom
├─┬ yk-cli@3.1.4 -> /Users/xx/xx/xx/node_modules/_yk-cli@3.1.4@yk-cli
│ └── react-dom@16.13.1 -> /Users/xx/xx/xx/node_modules/_react-dom@16.13.1@react-dom
└─┬ ykfe-utils@3.6.12 -> /Users/xx/xx/xx/node_modules/_ykfe-utils@3.6.12@ykfe-utils
└── react-dom@16.13.1 -> /Users/xx/xx/xx/node_modules/_react-dom@16.13.1@react-dom

参考：npm包react-server-render不支持react-hooks的原因和解决方法 。https://zhuanlan.zhihu.com/p/57651697

zhangyuang commented

并不会使用不了react-hooks请提供复现仓库。这个错很早就专门修复过了。

zhangyuang commented

看你的ls结果，你的react-dom软链接到其他路径去了。rm -rf node_modules yarn.lock package-lock.json 重装再试试
image

pashangshangpo commented

image

找到原因了，是因为我在clientRender中await了国际化导致的，按理也不应该有问题吧？请问我应该在哪个文件中初始化全局代码？客户端渲染的逻辑

pashangshangpo commented

并且await后，react中的componentDidMount事件在移动端没有进行执行

zhangyuang commented

没用过国际化理论上来说应该不会导致。。就是你的写法看起来很迷。。为什么会return一个await表达式。

zhangyuang commented

去layout组件或者具体的业务组件做吧

pashangshangpo commented

在layout组件里面就没法使用import国际化文件，只能使用script标签引入国际化脚本

zhangyuang commented

不要在组件顶层直接import这块代码会在服务端客户端都执行。去看文档faq __isBrowser__相关部分。或者直接用script标签

pashangshangpo commented

有存放静态资源的目录吗

zhangyuang commented

有，先看完官方文档和egg文档再提问