How can I import uploadcare into a react.js project?

My imports section looks like this

    // main imports
    import React from 'react';
    import {render} from 'react-dom';
    import { Router, Route, hashHistory } from 'react-router'
    import jQuery from '../scripts/jquery-1.8.3.min.js'
    import uploadcare from '../lib/uploadcare.min.js'

And then I would like to use uploadcare like this (via the javascript API):

onAddPhotosClick: function() {
    console.log("++ add photos");
    uploadcare.openDialog(null, {
        publicKey: "xxxxxxxxxxxx",
        imagesOnly: true,
        tabs: "file url facebook gdrive dropbox instagram evernote flickr skydrive"
    });
},

My code reaches the openDialog line, and then throws this error:

:8081/static/react_build/bundle.js:86 Uncaught TypeError: _uploadcareMin2.default.openDialog is not a function

Earlier, during the page load, my console logs:

Global public key not set. Uploads may not work!
Add this to the <head> tag to set your key:

<script>
UPLOADCARE_PUBLIC_KEY = 'your_public_key';
</script>
:8081/static/react_build/bundle.js:85 ++ add photos

The fact that I get this brown warning message above (which I am ok with because I am hoping to set the public key directly through the javascript API) makes me think that uploadcare.js file has been included properly, but the uploadCareMin2 error makes me think that I am not importing it quite correctly.

TL;DR; How can I import the uploadcare Javascript API into a react.js project?

Thank you for any help.

Solution

Not sure what uploadcare is but try

import '../lib/uploadcare.min.js'

It looks like you're importing the file directly meaning you would have to hope the author exported the file as export default in order to import it the way you showed. It's likely they just stick it in global space.

If not, it's also possible they exported a named value so try:

import { uploadcare } from '../lib/uploadcare.min.js';