Unable to use RawFileBrowser from local Library
Heartless49 opened this issue · 11 comments
After cloning this repo, and importing it locally to another project for use, I am unable to get RawFileBrowser
to render although this works from the library when installed using npm i
- The error itself comes from react-dnd
though.
Uncaught Invariant Violation: Could not find the drag and drop manager in the context of Ae. Make sure to render a DndProvider component in your top-level component.
This error occurs whether the DndProvider
is setup as the top-level component in my entire project, or even the immediate parent of RawFileBrowser
.
For some context: the other project has other components/features that are already using react-dnd
, and therefore we have a working setup for it - the versions match as well - and for some reason this component doesn't seem to recognize it no matter what is tried.
Using the direct FileBrowser
component proceeds to crash as well by throwing errors about invalid hook usage. I've looked into the possibility of multiple react
or react-dom
installations and that is not the issue.
Are you using npm link
or yarn link
to import it locally to another project?
npm link
@dreadera Good suggestion - that did it! I'll keep that in my "use-if-stuff-is-being-weird" catalog from now on, lol
Thank you so much!
Edit: Hmm, well that got it building, and importing properly at least - now I'm still stuck with the errors when attempting to actually use the component about react hooks being used incorrectly.
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://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.
at resolveDispatcher (react.development.js:1465)
at useEffect (react.development.js:1508)
at DndProvider (DndProvider.js:43)
at renderWithHooks (react-dom.development.js:14803)
at updateFunctionComponent (react-dom.development.js:17034)
at updateSimpleMemoComponent (react-dom.development.js:16972)
at updateMemoComponent (react-dom.development.js:16861)
at beginWork (react-dom.development.js:18682)
at HTMLUnknownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at beginWork$1 (react-dom.development.js:23203)
at performUnitOfWork (react-dom.development.js:22154)
at workLoopSync (react-dom.development.js:22130)
at performSyncWorkOnRoot (react-dom.development.js:21756)
at react-dom.development.js:11089
rollbar.umd.min.js:1 The above error occurred in the <DndProvider> component:
in DndProvider
in Fo
in div
in Unknown
in div (created by ModalBody)
The stack trace just goes all the way up my rendering path back to my root - I know I'm rendering the component inside of a modal, but our app's DndProvider
is way up at root, so this must be coming from this component? right?
Hmmm, this is quite strange. let me have a proper look. i'll get back to you asap :)
Before I go further. is it possible to send some details regarding your 'react' and 'react-dnd' versions? it might help me diagnose better if i can replicate your setup.
Sure
"react": "^16.9.0",
"react-dnd": "^8.0.3",
"react-dnd-html5-backend": "^8.0.3",
Hi @dreadera thanks for your help on this ticket. I thought I would comment and add a little color. @Heartless49 is a collaborator of mine. We like this Component, but in order for it to be useful to us, we need to be able to set a default value. In our project, users can pick a file (using this component) which is then persistent. If the user returns and wishes to change their selection, we want the component to auto-select the choice which the user made previously. If the file they chose is nested, we want those folders to be auto-opened, and the previously selected file to be re-selected as the default. From our analysis, this is not a feature of the current library. Our goal was to fork the repo, implement this change, and then offer a PR which adds this functionality. We're happy to help, but we're also on a timeline. Would this be a welcome contribution?
@kylepolich I'm happy to help! while that feature is lovely and PRs are welcome, maybe fixing the existing version might be quicker :)
I have tried to replicate this issue and I honestly haven't been able to.
Here is a couple of things I can suggest for the time being which might help you.
I changed our build format from umd
to esm
in the current main branch couple of weeks ago, this could be the cause as some bundlers do not like esm
format. I know react-dnd in particular has been quite annoying and has complexities related to its esm
version.
-
Change the output from
esm
tocjs
/iife
in the build script withinreact-keyed-file-browser
. -
Revert to the previous tag from the current branch which used the old builder.
-
Upgrade your own version of
react-dnd
to match thereact-keyed-file-browser
@dreadera Thanks for the suggestions - that fixed it. I've got the local version running great now.
Suggestion 3 was already done - just wanted to add that. But suggestion 1 and 2 definitely fixed it.
@dreadera Thanks for the suggestions - that fixed it. I've got the local version running great now.
Suggestion 3 was already done - just wanted to add that. But suggestion 1 and 2 definitely fixed it.
I'm glad to hear that. I'll include both the esm
and cjs
versions of the library in the next release to help with compatibility going forward. I will be closing this issue for now and If there are more issues, feel free to open up another.