Uncaught (in promise) Error: Filestack Picker Initialize Error in Console After Upload

[hamideha]

I'm using Filestack in my react app (17.0.2) and whenever I press upload on the picker I get this error in the console. The upload is working correctly and I'm getting the right result back from the onSuccess prop but I don't know if this error is caused by my app.

[a-martins]

Hey man, Do you solved this issue? If yes, what did you do?

[hamideha]

Hey man, Do you solved this issue? If yes, what did you do?

No, sorry about that. I ended up using a completely different library.

[a-martins]

Hey man, Do you solved this issue? If yes, what did you do?

No, sorry about that. I ended up using a completely different library.

Could you please re-open this issue to avoid duplicate issues?
This is happening with me too and I didn't find anything helpful yet.

[konradkrk]

@a-martins I can't reproduce this bug, please send yours sample code.

[a-martins]

@konradkrk https://codesandbox.io/s/mystifying-greider-dd45q

[noire-munich]

I have the same issue but on render. Here's my code:

import { PickerInline } from 'filestack-react'
import useUploader from 'src/ui/File/useUploader'
import './Stage.scss'

const Stage = ({ component: Component, name }) => {
  const { errors, onUploadDone, files } = useUploader({ name })

  return (
    <div className="flex w-full flex-col justify-center border-[1px] bg-white p-4 align-middle md:flex-row">
      <Component name={name} files={files} />
      <div className="mt-4 flex w-full shrink md:mt-0 md:ml-4 md:w-96">
        <PickerInline
          apikey={xxx}
          onUploadDone={onUploadDone}
          pickerOptions={{
            displayMode: 'inline',
            disableTransformer: true,
            fromSources: ['local_file_system', 'googledrive', 'url', 'gmail'],
            viewType: 'grid',
          }}
        >
          <div className="guaranteed-flexible-height"></div>
        </PickerInline>
      </div>
      {errors && <div>Errors!</div>}
    </div>
  )
}

export default React.memo(Stage)

I've tried any sort of modifications in here and nothing worked.
At some point way earlier on in my dev, I had a version without the error, but I can't go back to that point for some reason. To the best of my recollection it was linked to a hook or a React.memo.

[noire-munich]

Ok, just got it... ><.

My component is wrapped in a HOC, that HOC calls a redux-toolkit Provider with a store: it let's me handle a preview display.

So those two libs together raise that error in the console. At least that's the issue for me.

[harelcoman]

It seems we render the component before it properly initializes.
Adding a timeout helped with that.
I suggest if not already exist extracting a variable isIntialize so we can check this and not a random timeout.

   useEffect(() => {
        const timer = setTimeout(() => {
            setShouldRenderPicker(true)
        }, 600)

        return () => clearTimeout(timer)
    }, [])