无法导入 React 组件

Question

我正在尝试制作一个使用此 npm 包拖放文件选择器的小示例 React 项目： 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 (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

so 2个版本的react-dom，另一个命令显示没有结果：

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

and 运行ning 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

ive tried to uninstall the older react version with sudo npm uninstall -g react@16.14.0 but afterwards, if i run npm ls react i still see both versions

这里的问题是：

您的应用依赖于 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 page，您会看到一堆被作者忽略的自动安全更新请求）。

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

Answer 2

您可以 override 在您的 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"
  }
}

无法导入 React 组件

can't import React Component

javascript

node.js

npm

reactjs