uploadcare is undefined in reactjs app

I am trying to use uploadcare for my reactjs application to store images. But I am unable to make it work. I have followed the documentation but I'm getting an error "Uncaught TypeError: Cannot read property 'tabs' of undefined at Object.u.openDialog (uploadcare.min.js:24)". Although I have npm installed uploadcare-widget and importing it in my file but it doesn't work. Here is the relevant code:

First I am adding script tag in the index.html like this:

<script>
  UPLOADCARE_PUBLIC_KEY = "demopublickey";
</script>

Then in my component I'm doing this:

import uploadcare  from 'uploadcare-widget';

class ImageComponent extends React.Component {
  componentDidMount() {
    uploadcare.start({publicKey: 'demopublickey'})
  }

  addImage(e) {
    uploadcare.openDialog(null, {
      imagesOnly: true,
      multiple: false,
    }).done((file) => {
      file.promise().done((fileInfo) => {
        console.log(fileInfo.cdn)
      })
    })
  }

  render () {
    const imageInput = (
      <div className='image-box'>
        <Button onClick={this.addImage}>Add Image</Button>
      </div>
    )

    return (
      <div>
        { this.state.imgSrc && this.renderImageView() }
        { !this.state.imgSrc && imageInput }
      </div>
    )
  }
}

I am stuck on this for a very long time now. Please help!

Solution

You probably use the 3.0.0 version. In this version there is an error in openDialog. Reported in the issue on github.

Temporary solution: set up second parameter (tab) and add tabs property for third parameter (settings), see docs,

uploadcare.openDialog(null, 'file', {
  tabs: 'all',
  imagesOnly: true,
  multiple: false,
}).done((file) => {
  file.promise().done((fileInfo) => {
    console.log(fileInfo.cdn)
  })
})

Today I'll release new version of widget with fix of this bug. You'll can update and remove the temporary solution.