无法导入反应组件

Question

我正在尝试制作一个使用此 npm 包拖放文件选择器的小示例反应项目： https ://www.npmjs.com/package/@yelysei/react-files-drag-and-drop

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

我安装了包并将 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;

当我运行我的反应项目时，它开始正常，没有错误。 但是当我在 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 ://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显示 2 个反应版本：

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

我面临的阻塞错误是由于我安装了多个反应版本引起的吗？ 还是我在 App.js 中错误地配置了我的组件？

Answer 1

我尝试使用sudo npm uninstall -g react@16.14.0卸载较旧的反应版本，但之后，如果我运行 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"
  }
}