使用fineuploader和react-rails

Question

I'm trying to use fineuploader with react and have installed all the relevant dependencies. Following is the code I use:-

 import React, { Component } from 'react' import FineUploaderTraditional from 'fine-uploader-wrappers' import Gallery from 'react-fine-uploader' import 'react-fine-uploader/gallery/gallery.css' const uploader = new FineUploaderTraditional({ options: { chunking: { enabled: true }, deleteFile: { enabled: true, endpoint: '/uploads' }, request: { endpoint: '/uploads' }, retry: { enableAuto: true } } }) class UploadComponent extends Component { render() { return ( <Gallery uploader={uploader} /> ) } } export default UploadComponent 

But I get the following errors:-

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Gallery`.
at invariant (invariant.js?7313:44)
at instantiateReactComponent (instantiateReactComponent.js?e676:74)
at instantiateChild (ReactChildReconciler.js?c86a:44)
at eval (ReactChildReconciler.js?c86a:71)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:77)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:93)
at traverseAllChildrenImpl (traverseAllChildren.js?5edf:93)
at traverseAllChildren (traverseAllChildren.js?5edf:172)
at Object.instantiateChildren (ReactChildReconciler.js?c86a:70)
at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js?e1f8:185)

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in. Check the render method of `Gallery`.
in Gallery (created by UploadComponent)
in UploadComponent

I've been following the react fineuploader documentation and I've tried a few different things but nothing seems to work.

Answer 1

Issue is some unmet dependency, which in my case was:

react-transition-group@1.x

I had

react-transition-group@2.x

Removing 2.x and installing 1.2.1 fixed the problem.

Keep an eye on installation dependencies for any package you are trying to configure.

Thanks to the react-fine-upload owner rnicholus for the help.

Answer 2

I think you have to import Gallery component from module.

import Gallery from 'react-fine-uploader'

Update:
Also try wraping Gallery inside a div

class UploadComponent extends Component {
    render() {
        return (
          <div>
            <Gallery uploader={uploader} />
          </div>
        )
    }
}