钩子错误：在 Windows 上使用 NextJS 或 ReactJS 的钩子调用无效

Question

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

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

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

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

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

下面是一个使用示例：

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"

Answer 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

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

存在多个模块，只是外壳不同