钩子错误:在 Windows 上使用 NextJS 或 ReactJS 的钩子调用无效 [英] Hooks error: Invalid Hook Call using NextJS or ReactJS on Windows

问题描述

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

<块引用>

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

此问题仅在 Windows 上出现，在 Mac 上运行正常.

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

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

这是一个使用示例:

import React, { useState, useEffect } from 'react'const 索引 = () =>{const [ test, setTest ] = useState('Test')useEffect(() => (console.log(`页面加载，变量值:${test}`)), [])return 
你好
}

我正在使用以下版本:

"next": "^9.1.1",反应":^ 16.10.2"，反应域":^16.10.2"

解决方案

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

例如，以下将导致 Hook 错误:

cd desktop/project_foldernpm 运行开发

问题是桌面"是大写的目录名.因此，按照以下步骤运行服务器非常有效:

cd Desktop/project_foldernpm 运行开发

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

cd desktop/project_folder## 在 VS Code 中打开 project_folder代码 .## 从 VS Code 的交互式 shell 启动开发服务器npm 运行开发

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

<块引用>

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

While attempting to use React Hooks in NextJS I continue to receive the following error:

Hooks can only be called inside the body of a function component.

This issue only occurs on Windows and works fine using Mac.

This is a well documented issue and I have troubleshot many of the proposed solutions, including:

• Multiple versions of React or React DOM
• Modifying webpack settings in next.config.js
• Linking to specific node module pacakges

Here is an example of use:

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>
}

I am using the following versions:

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

解决方案

If you are experiencing this issue ONLY on Windows, it may have to do with how you navigate to your project folder. Make sure you are using the correct character case on all of your folders! In my scenario, I used Powershell to navigate to my project and run the development server.

For example, the following will result in a Hook error:

cd desktop/project_folder

npm run dev

The issue is that "desktop" is a capitalized directory name. Therefore, running the server with the following steps works perfectly:

cd Desktop/project_folder

npm run dev

This issue also occurs if you opened your project_folder using incorrect casing and then use an interactive shell to run the development server, for example:

cd desktop/project_folder

## Open project_folder in VS Code
code .

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

At the root of the issue, I believe module paths are incorrectly being imported due to a variation of expected path names. If you see the following warning coming from your development server, make sure to address it first:

There are multiple modules that exist that only differ in casing

这篇关于钩子错误:在 Windows 上使用 NextJS 或 ReactJS 的钩子调用无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！