Hooks 错误：在 Windows 上使用 NextJS 或 ReactJS 的 Hook Call 无效

Posted 2023-02-22

【中文标题】Hooks 错误：在 Windows 上使用 NextJS 或 ReactJS 的 Hook Call 无效

【英文标题】：Hooks error: Invalid Hook Call using NextJS or ReactJS on Windows

【发布时间】：2020-02-10 09:24:38

【问题描述】：

尝试在 NextJS 中使用 React Hooks 时，我继续收到以下错误：

钩子只能在函数组件内部调用。

此问题仅在 Windows 上出现，并且在 Mac 上运行良好。

这是一个有据可查的问题，我已经解决了许多建议的解决方案，包括：

React 或 React DOM 的多个版本 修改next.config.js中的webpack设置 链接到特定节点模块包

这是一个使用示例：

import React,  useState, useEffect  from 'react'

const Index = () => 
   const [ test, setTest ] = useState('Test')

   useEffect(() => (
      console.log(`Page loaded, variable value: $test`)
   ), [])

   return <div>Hello</div>

我正在使用以下版本：

"next": "^9.1.1",
"react": "^16.10.2",
"react-dom": "^16.10.2"

【问题讨论】：

我有一些问题。

【参考方案1】：

如果您仅在 Windows 上遇到此问题，则可能与您导航到项目文件夹的方式有关。确保在所有文件夹上使用正确的字符大小写！在我的场景中，我使用 Powershell 导航到我的项目并运行开发服务器。

例如，以下会导致 Hook 错误：

cd desktop/project_folder

npm run dev

问题在于“桌面”是一个大写的目录名称。因此，使用以下步骤运行服务器非常有效：

cd Desktop/project_folder

npm run dev

如果您使用不正确的大小写打开 project_folder，然后使用交互式 shell 运行开发服务器，也会出现此问题，例如：

cd desktop/project_folder

## Open project_folder in VS Code
code .

## Start development server from VS Code's interactive shell
npm run dev

在问题的根源上，我认为由于预期路径名称的变化，模块路径被错误地导入。如果您看到来自开发服务器的以下警告，请务必先解决它：

存在多个模块，只是大小写不同

【讨论】：

我只能说，WOW windows :face_palm:。感谢您找到这个大卫

非常非常非常感谢。谢谢人:)

谢谢。我无法弄清楚发生了什么。得买个mac?‍♂️