Uncaught TypeError: Cannot read property 'init' of undefined

[chdecultot]

Hi,

I'm trying to use this library for the first time in my react app and I have the error message below when I click on the button "Pick a File":

Uncaught TypeError: Cannot read property 'init' of undefined
    at t.r.initClient (filestack-react.js:1)
    at r.onClickPick (filestack-react.js:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
    at forEachAccumulated (react-dom.development.js:562)
    at runEventsInBatch (react-dom.development.js:723)
    at runExtractedEventsInBatch (react-dom.development.js:732)
    at handleTopLevel (react-dom.development.js:4472)
    at batchedUpdates$1 (react-dom.development.js:16537)
    at batchedUpdates (react-dom.development.js:2131)
    at dispatchEvent (react-dom.development.js:4551)
    at interactiveUpdates$1 (react-dom.development.js:16592)
    at interactiveUpdates (react-dom.development.js:2150)
    at dispatchInteractiveEvent (react-dom.development.js:4528)

I am simply adding the following to my application:

import ReactFilestack from 'filestack-react'

const onSuccess = result => {
  console.log('result', result);
};

const options = {
  accept: 'image/*',
  maxFiles: 5,
  storeTo: {
    location: 's3',
  },
};
const apiKey = "MY API KEY"

<form>
 <div>Test</div>
 <ReactFilestack 
     apikey={apiKey}
      mode="upload"
     options={options}
     onSuccess={onSuccess}
 />
</form>

Is it maybe linked to my version of React ? I'm using create-react-app with react v.16.4.0

Thanks in advance for your help!

[velveteer]

@chdecultot Thanks for reporting this issue! It looks like this might be related to the recent release of filestack-js 1.0. It's likely anyone following the readme instructions since that release will have run into issues because the peer dependency was still on a pre-1.0 of filestack-js, and this library needed some patching to accommodate the changes in 1.0.

We just published filestack-react 2.0.0 today, which should now support filestack-js 1.0 and React 16. Can you try upgrading to this new version and confirm if this resolves the issue? And do make sure your peer dependencies are correct as well.

[chdecultot]

Hi @velveteer,

Thanks a lot!

Now I get another error:

TypeError: File argument is not a valid Blob
    at getFile (index.esm.js:6926)
    at upload (index.esm.js:7633)
    at Client../node_modules/filestack-js/build/browser/index.esm.js.Client.upload (index.esm.js:8601)
    at t.r.initClient (filestack-react.js:1)
    at r.onClickPick (filestack-react.js:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:100)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:138)
    at Object.invokeGuardedCallback (react-dom.development.js:187)
    at Object.invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:201)
    at executeDispatch (react-dom.development.js:461)
    at executeDispatchesInOrder (react-dom.development.js:483)
    at executeDispatchesAndRelease (react-dom.development.js:581)
    at executeDispatchesAndReleaseTopLevel (react-dom.development.js:592)
    at forEachAccumulated (react-dom.development.js:562)
    at runEventsInBatch (react-dom.development.js:723)
    at runExtractedEventsInBatch (react-dom.development.js:732)
    at handleTopLevel (react-dom.development.js:4472)
    at batchedUpdates$1 (react-dom.development.js:16537)
    at batchedUpdates (react-dom.development.js:2131)
    at dispatchEvent (react-dom.development.js:4551)
    at interactiveUpdates$1 (react-dom.development.js:16592)
    at interactiveUpdates (react-dom.development.js:2150)
    at dispatchInteractiveEvent (react-dom.development.js:4528)

But if I remove the "mode='upload'" prop the filePicker opens up correctly. I haven't yet tested the rest of the integration.

[velveteer]

Are you passing a file prop to the component when using upload mode? I have to say I am not sure I understand why this mode exists, since it may be more useful to use the client's upload method directly. But if you are passing a file prop and still getting this error then can you share the related code?

But I am glad it appears to be working so far. :)

[chdecultot]

Yes that's why I was just understanding by reading the filestack-js documentation... actually I didn't pass any file prop, so that's why it was failing.

When using the filepicker it seems to be working perfectly fine, my files are uploaded to my S3 bucket as expected.

Thanks a lot for your help, we can close this issue now.