Question

我在自己的库中有一个功能组件，我正在将其导入到nextJS项目中，由于某种原因，它不被视为反应功能组件。

我的图书馆代码示例：

import React, { useState } from 'react';
export function Dialog(){
    const [open, setOpen] = useState(false);

    return (<>
             // some jsx logic
            </>)

}

将其导入我的nextJS组件：

import { Dialog } from '@myNamespace/library';

当我尝试使用时

<Dialog />

我收到此错误：

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
See https://reactjs.org/warnings/invalid-hook-call-warning.html for tips about how to debug and fix this problem.

所以我用对话框注销了一个本地react组件，发现虽然本地react组件似乎位于名称空间react__WEBPACK_IMPORTED_MODULE_1___default上，但是我导入的组件只是一个普通函数，而不是react组件。

关于为什么NextJS不将我的函数作为React组件导入的任何想法？

编辑：

这真的很有趣：当我删除钩子时，nextJS似乎认为它是一个react组件。但是，当我挂上钩子时，它不会-并抛出该错误。

解决方案 对于任何有兴趣的人-问题是我的软件包已npm link进入我的项目。因此，在这种情况下，存在无法正确打包组件的问题。

Answer 1

您的react和react-dom可能未更新为钩子尝试yarn add react@18.6 react-dom@18.6的标准

将外部React组件导入nextJS项目

1 个答案: