I am trying to make a small example react project that uses this npm package drag and drop file picker: https://www.npmjs.com/package/@yelysei/react-files-drag-and-drop

I made a fresh react project with npx create-react-app my-app.

I installed the package and added the filesDragAndDrop component to my App.js file like so:

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;

When I run my react project, it starts fine with no errors. but when I visit my home page in chrome, I get a bunch of red console errors that prevent the page from loading

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)

I tried to investigate what this error meant on the linked site: https://reactjs.org/warnings/invalid-hook-call-warning.html

running npm ls react-dom i get this:

$ npm ls react-dom
[email protected] /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
├─┬ @yelysei/[email protected]
│ └── [email protected]
└── [email protected]

so 2 versions of react-dom, and the other command shows no results:

$ npm ls react-native
[email protected] /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
└── (empty)

and running npm ls react shows 2 react versions:

[email protected] /mnt/c/Users/marti/Documents/projects/react-draganddrop-demo
├─┬ @yelysei/[email protected]
│ └── [email protected]
└── [email protected]

is the blocking error I am facing caused by me having multiple react versions installed? or did i configure my component in App.js incorrectly?

CodePudding user response：

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

The problem here is that:

• Your app depends on React 18
• Your app depends on @yelysei/react-files-drag-and-drop
• @yelysei/react-files-drag-and-drop depends on React 16

You can't uninstall React 16 because your app isn't asking for it in the first place. It is being pulled in by a dependency.

@yelysei/react-files-drag-and-drop has two problems (at least it has two that are visible here):

• It has a standard dependency on React instead of a peer dependency.
• It hasn't been updated in two years so the version of React is depends on is out of date. (If you look at its Github page you'll see a stack of automated security update requests that have been ignored by the author).

You could fork @yelysei/react-files-drag-and-drop and fix all the problems, but you'd probably be better off ditching it and using something better supported.

CodePudding user response：

You can override the nested outdated dependency in your package.json and try whether it works. You basically tell npm to ignore the outdated dependency and use the same that your app uses.

{
  // 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"
  }
}