无法导入 React 组件

Question

我想做一个小的react项目的例子，使用这个npm包拖放文件选择器:https://www.npmjs.com/package/@yelysei react-files-drag-and-drop

我用npx create-react-app my-app做了一个新的react项目。

我安装了这个包，并将filesDragAndDrop组件添加到我的App.js文件中，如下所示:

import logo from "./logo.svg";
import "./App.css";
import FilesDragAndDrop from "@yelysei/react-files-drag-and-drop";
function App() {
return (
<div>
welcome
<FilesDragAndDrop
onUpload={(files) => console.log(files)}
count={3}
formats={["jpg", "png", "svg"]}
containerStyles={{
width: "200px",
height: "200px",
border: "1px solid #cccccc",
}}
openDialogOnClick
>
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
Drop files here
</div>
</FilesDragAndDrop>
</div>
);
}
export default App;

当我运行我的react项目时，它开始很好，没有错误。但是当我在chrome浏览器中访问我的主页时，我得到了一堆红色控制台错误，阻止页面加载

react.development.js:1465 Uncaught Error: 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://-f-b.me/-re-act-inv-alid-hook-call` for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1465:1)
at Object.useState (react.development.js:1496:1)
at FilesDragAndDrop (index.js:43:1)
at renderWithHooks (react-dom.development.js:16175:1)
at mountIndeterminateComponent (react-dom.development.js:20913:1)
at beginWork (react-dom.development.js:22416:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
at invokeGuardedCallback (react-dom.development.js:4274:1)
at beginWork$1 (react-dom.development.js:27405:1)

我试着调查这个错误在链接站点上的含义:https://reactjs.org/warnings/invalid-hook-call-warning.html

运行npm ls react-dom我得到这个:

$ npm ls react-dom
my-app-2@0.1.0 /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
├─┬ @yelysei/react-files-drag-and-drop@1.0.0
│ └── react-dom@16.14.0
└── react-dom@18.1.0

所以2个版本的react-dom，而另一个命令显示没有结果:

$ npm ls react-native
my-app-2@0.1.0 /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
└── (empty)

和运行npm ls react显示两个反应版本:

my-app-2@0.1.0 /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
├─┬ @yelysei/react-files-drag-and-drop@1.0.0
│ └── react@16.14.0
└── react@18.1.0

我所面临的阻塞错误是由我安装了多个react版本引起的吗?或者我配置我的组件在App.js不正确?

Answer 1

我尝试用sudo npm uninstall -g react@16.14.0卸载旧的react版本，但之后，如果我运行npm ls react，我仍然看到两个版本

这里的问题是:

• 你的应用依赖于React 18
• 你的应用依赖于@yelysei/react-files-drag-and-drop
• @yelysei/react-files-drag-and-drop依赖于React 16

你不能卸载React 16，因为你的应用程序一开始就没有要求它。它被一个依赖项拉入。

@yelysei/react-files-drag-and-drop有两个问题(至少在这里它有两个可见的问题):

• 它对React有一个标准依赖，而不是对等依赖。
• 它已经两年没有更新了，所以React的版本已经过时了。(如果你看看它的Github页面，你会看到一堆被作者忽略的自动安全更新请求)。

---

您可以分叉@yelysei/react-files-drag-and-drop并解决所有问题，但您可能最好放弃它并使用更好支持的东西。

Answer 2

您可以覆盖package.json中嵌套的过时依赖项，并尝试它是否有效。你基本上是告诉npm忽略过时的依赖，并使用与你的应用相同的依赖。

{
// your regular app dependencies
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
"overrides": {
// the override can be defined as a reference to the app dependency
"react": "$react",
"react-dom": "$react-dom"
}
}