Skip to content
This repository has been archived by the owner on Nov 19, 2018. It is now read-only.

Element type is invalid: expected a string ... Check the render method of Gallery #150

Closed
ziaulrehman40 opened this issue Oct 3, 2017 · 15 comments
Closed

Element type is invalid: expected a string ... Check the render method of Gallery #150

ziaulrehman40 opened this issue Oct 3, 2017 · 15 comments

Comments

@ziaulrehman40
Copy link

I am trying to get fine uploader up and running on for many hours now. I have tried many different things but same error pops up.

What i tried:

1- Integrate in rails app

I have

rails 5.1
yarn
weback
react(15)

I ran all below commands:

yarn add react-fine-uploader
yarn add fine-uploader
yarn add react-transition-group
yarn install

Than as installation guide states I imported:

import FineUploaderTraditional from 'fine-uploader-wrappers';
import Gallery from 'react-fine-uploader';

in one of my jsx files and tried a basic example from the same guide which makes my react component's render method somethign like:

  render() {
    const uploader = new FineUploaderTraditional({
      options: {
          chunking: {
              enabled: true
          },
          deleteFile: {
              enabled: true,
              endpoint: '/uploads'
          },
          request: {
              endpoint: '/uploads'
          },
          retry: {
              enableAuto: true
          }
      }
  });
return (
        <Gallery uploader={ uploader } />
);

But than I am getting a warning followed by an error in browser console:

warning.js?6327:36 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 MediaAssetsTable)
    in div (created by MediaAssetsTable)
    in MediaAssetsTable (created by MediaAssetsIndex)
    in div (created by MediaAssetsIndex)
    in MediaAssetsIndex
printWarning @ warning.js?6327:36
warning @ warning.js?6327:60
createElement @ ReactElementValidator.js?f652:192
render @ index.js?7026:173
(anonymous) @ ReactCompositeComponent.js?063f:795
measureLifeCyclePerf @ ReactCompositeComponent.js?063f:75
_renderValidatedComponentWithoutOwnerOrContext @ ReactCompositeComponent.js?063f:794
_renderValidatedComponent @ ReactCompositeComponent.js?063f:821
performInitialMount @ ReactCompositeComponent.js?063f:361
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
mountChildren @ ReactMultiChild.js?e1f8:236
_createInitialChildren @ ReactDOMComponent.js?922a:703
mountComponent @ ReactDOMComponent.js?922a:522
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
mountChildren @ ReactMultiChild.js?e1f8:236
_createInitialChildren @ ReactDOMComponent.js?922a:703
mountComponent @ ReactDOMComponent.js?922a:522
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
mountComponentIntoNode @ ReactMount.js?0cc2:104
perform @ Transaction.js?91bc:143
batchedMountComponentIntoNode @ ReactMount.js?0cc2:126
perform @ Transaction.js?91bc:143
batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
batchedUpdates @ ReactUpdates.js?be0d:97
_renderNewRootComponent @ ReactMount.js?0cc2:319
_renderSubtreeIntoContainer @ ReactMount.js?0cc2:401
render @ ReactMount.js?0cc2:422
render @ index.js?a79d:38
mountComponents @ index.js?a79d:84
e @ jquery.min.self-5c2148f394c0d0085e316066a9ec847d1d5335885c0ab4a32480ad882998ed3f.js?body=1:4
dispatch @ jquery.min.self-5c2148f394c0d0085e316066a9ec847d1d5335885c0ab4a32480ad882998ed3f.js?body=1:4
q.handle @ jquery.min.self-5c2148f394c0d0085e316066a9ec847d1d5335885c0ab4a32480ad882998ed3f.js?body=1:4
t.dispatch @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6
t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:7
t.Controller.r.pageLoaded @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6
(anonymous) @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6


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)
invariant @ invariant.js?7313:44
instantiateReactComponent @ instantiateReactComponent.js?e676:74
instantiateChild @ ReactChildReconciler.js?c86a:44
(anonymous) @ ReactChildReconciler.js?c86a:71
traverseAllChildrenImpl @ traverseAllChildren.js?5edf:77
traverseAllChildrenImpl @ traverseAllChildren.js?5edf:93
traverseAllChildrenImpl @ traverseAllChildren.js?5edf:93
traverseAllChildren @ traverseAllChildren.js?5edf:172
instantiateChildren @ ReactChildReconciler.js?c86a:70
_reconcilerInstantiateChildren @ ReactMultiChild.js?e1f8:185
mountChildren @ ReactMultiChild.js?e1f8:224
_createInitialChildren @ ReactDOMComponent.js?922a:703
mountComponent @ ReactDOMComponent.js?922a:522
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
mountChildren @ ReactMultiChild.js?e1f8:236
_createInitialChildren @ ReactDOMComponent.js?922a:703
mountComponent @ ReactDOMComponent.js?922a:522
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
mountChildren @ ReactMultiChild.js?e1f8:236
_createInitialChildren @ ReactDOMComponent.js?922a:703
mountComponent @ ReactDOMComponent.js?922a:522
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
performInitialMount @ ReactCompositeComponent.js?063f:370
mountComponent @ ReactCompositeComponent.js?063f:257
mountComponent @ ReactReconciler.js?c56c:45
mountComponentIntoNode @ ReactMount.js?0cc2:104
perform @ Transaction.js?91bc:143
batchedMountComponentIntoNode @ ReactMount.js?0cc2:126
perform @ Transaction.js?91bc:143
batchedUpdates @ ReactDefaultBatchingStrategy.js?bdd7:62
batchedUpdates @ ReactUpdates.js?be0d:97
_renderNewRootComponent @ ReactMount.js?0cc2:319
_renderSubtreeIntoContainer @ ReactMount.js?0cc2:401
render @ ReactMount.js?0cc2:422
render @ index.js?a79d:38
mountComponents @ index.js?a79d:84
e @ jquery.min.self-5c2148f394c0d0085e316066a9ec847d1d5335885c0ab4a32480ad882998ed3f.js?body=1:4
dispatch @ jquery.min.self-5c2148f394c0d0085e316066a9ec847d1d5335885c0ab4a32480ad882998ed3f.js?body=1:4
q.handle @ jquery.min.self-5c2148f394c0d0085e316066a9ec847d1d5335885c0ab4a32480ad882998ed3f.js?body=1:4
t.dispatch @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6
t.Controller.r.notifyApplicationAfterPageLoad @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:7
t.Controller.r.pageLoaded @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6
(anonymous) @ turbolinks.self-1d1fddf91adc38ac2045c51f0a3e05ca97d07d24d15a4dcbf705009106489e69.js?body=1:6

I checked and it is going in render method of installed react-fine-uploader's Gallery but than it thorws this error from that method.

2. Create fresh react app with rails and add fine-uploader in there

Same results after following same steps to add fine-uploader.

3. In a fresh react app( created with create-react-app )

Same error. Same steps followed.

Now, this can be a noob mistake somewhere because I am quite new to react, or this can be a potential bug. In both cases I think this will help some people having same issues if we get it resolved it.

I have seen this: https://stackoverflow.com/questions/34130539 it didn't help.

This can be a noob mistake as I am quite new to react, or it can be a bug or something which needs a fix.
@rnicholus
Copy link
Member

Please don’t show pieces of files, show the entirety of all involved source files.

@ziaulrehman40
Copy link
Author

Let me share whole test react app i created.
Give me some time, uploading it to github.

@ziaulrehman40
Copy link
Author

For the time being, here is a question on stackoverflow my colleague posted, we are working separately on same issue(in a bid to solve problem by any means).
https://stackoverflow.com/questions/46540736

@rnicholus
Copy link
Member

What version of React-transition-group have you installed? If it’s not 1.x, that may be the issue

@ziaulrehman40
Copy link
Author

Its 2.x
I don't see anywhere this thing mentioned in docs though.

Let me try with version 1.x

@rnicholus
Copy link
Member

It’s listed in the peerDependencies section of package.json. You likely overlooked warning messages in your console when installing dependencies.

@ziaulrehman40
Copy link
Author

ziaulrehman40 commented Oct 3, 2017 •
edited
Loading

Yes it solved the problem.
Thank-you for the prompt response.
And yes there was a warning about this.

@rnicholus
Copy link
Member

rnicholus commented Oct 4, 2017 •
edited
Loading

I'm thinking that I should either update the library to handle v2 of this dependency and/or make it an actual dependency instead of a peerDependency...

@ziaulrehman40
Copy link
Author

Absolutely makes sense, handling v2 is better if you got some time. Otherwise at-least making it dependency will suffice for now.

@rnicholus
Copy link
Member

I'll re-open this as a reminder then.

@rnicholus rnicholus reopened this Oct 4, 2017
@rnicholus
Copy link
Member

BTW if someone wants to open a PR that both moves React Fine Uploader to 2.x react-transition-group and moves this dependency from peerDependencies to dependencies, that would speed things up. I'm currently working on other React Fine Uploader and Fine Uploader cases.

@AhmadiRamin
Copy link

Hey guys , any progress with 2.x versions?

@rnicholus
Copy link
Member

See above comment

@rnicholus rnicholus mentioned this issue Mar 13, 2018
Closed
@shivgarg5676
Copy link
Contributor

hey @rnicholus, I have submitted a PR. Please review and suggest changes.

@rnicholus
Copy link
Member

fixed in v1.1.1 - just released

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@rnicholus @shivgarg5676 @AhmadiRamin @ziaulrehman40