Javascript 将外部React组件导入nextJS项目

Javascript 将外部React组件导入nextJS项目,javascript,reactjs,next.js,Javascript,Reactjs,Next.js,我在自己的库中有一个功能组件,我正在将其导入到nextJS项目中,由于某些原因,它没有被识别为react功能组件 我的库代码示例: import React, { useState } from 'react'; export function Dialog(){ const [open, setOpen] = useState(false); return (<> // some jsx logic </&g

我在自己的库中有一个功能组件,我正在将其导入到nextJS项目中,由于某些原因,它没有被识别为react功能组件

我的库代码示例:

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

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

}
当我尝试使用

<Dialog />
因此,我用对话框注销了一个本地react组件,发现虽然本地react组件似乎位于名称空间
react\uuuu WEBPACK\u IMPORTED\u MODULE\u 1\uuuuuuu default
,但我导入的组件仍然是一个普通函数,而不是react组件

关于NextJS为什么不将我的函数作为react组件导入,有什么想法吗

编辑:

这里有一件非常有趣的事情:当我移除钩子时,nextJS似乎认为它是一个react组件。但是当我把钩子放进去的时候,它没有——并且抛出了那个错误

解决方案

对于任何感兴趣的人来说,问题是我的包是
npm链接到我的项目中的。因此,在这种情况下,它的问题在于没有正确包装组件

您的react和react dom可能没有更新到hooks try的标准
warn addreact@18.6反应-dom@18.6

您的react和react dom可能没有更新到hooks try
的标准react@18.6反应-dom@18.6

您需要导入不带大括号的默认值:
import来自“@myNamespace/library”的对话框是否尝试使用箭头函数?可能与@evgenifotia重复这不是同一问题。您需要导入不带大括号的默认值:
从“@myNamespace/library”导入对话框你试过使用箭头函数吗?可能是@evgenifotia的重复。这不是同一个问题。我会检查!谢谢我刚刚检查了这两个项目-它们都在
16.8.6
上,我们需要看看对话框代码是什么样子才能解决问题。我无法真正分享完整的逻辑,但我添加了带有钩子的部分。似乎nextJS认为我只是在常规组件中添加了一个钩子。所以它不认为我的Dialog()函数是一个react函数组件。我真的很难说,因为我看不到整个组件,你可能有一个github链接或其他什么吗?我会检查的!谢谢我刚刚检查了这两个项目-它们都在
16.8.6
上,我们需要看看对话框代码是什么样子才能解决问题。我无法真正分享完整的逻辑,但我添加了带有钩子的部分。似乎nextJS认为我只是在常规组件中添加了一个钩子。所以它不认为我的Dialog()函数是一个react函数组件。我真的很难说,如果看不到整个组件,你可能有一个github链接或其他什么?
<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.