Unable to use RawFileBrowser from local Library

[Heartless49]

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.

[dreadera]

Are you using npm link or yarn link to import it locally to another project?

[Heartless49]

npm link

[dreadera]

I had similar issues when testing locally with npm link and yarn link. Since it behaves differently from system to system. Reference

I resorted to using yalc which works perfectly.
Is it possible for you to give yalc a try and tell me if the behaviour is the same?

[Heartless49]

@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.

[Heartless49]

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?

[dreadera]

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.

[Heartless49]

Sure

"react": "^16.9.0",

"react-dnd": "^8.0.3",
"react-dnd-html5-backend": "^8.0.3",

[kylepolich]

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?

[dreadera]

@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.

1. Change the output from esm to cjs/ iife in the build script within react-keyed-file-browser.

2. Revert to the previous tag from the current branch which used the old builder.

3. Upgrade your own version of react-dnd to match the react-keyed-file-browser

[Heartless49]

@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]

@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.