無法匯入反應組件

我正在嘗試制作一個使用此 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

運行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 中錯誤地配置了我的組件？

uj5u.com熱心網友回復：

我試圖卸載舊的反應版本， sudo npm uninstall -g [email protected]但之后，如果我運行 npm ls react 我仍然看到兩個版本

這里的問題是：

• 你的應用依賴于 React 18
• 您的應用取決于@yelysei/react-files-drag-and-drop
• @yelysei/react-files-drag-and-drop取決于反應 16

你不能卸載 React 16，因為你的應用程式一開始就沒有要求它。它被依賴項拉進來。

@yelysei/react-files-drag-and-drop有兩個問題（至少它有兩個在這里可見）：

• 它具有對 React 的標準依賴，而不是對等依賴。
• 它已經兩年沒有更新了，所以 React 依賴的版本已經過時了。（如果你查看它的Github 頁面，你會看到一堆被作者忽略的自動安全更新請求）。

您可以分叉@yelysei/react-files-drag-and-drop并解決所有問題，但最好放棄它并使用更好的支持。

uj5u.com熱心網友回復：

您可以覆寫嵌套的過時依賴項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"
  }
}

標籤：javascript 节点.js 反应 npm

上一篇：為什么將npm中的型別定義放在@types命名空間中？

下一篇：NestJS8.4.5中的漏洞