search

raphamorim / react-tv

[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications
https://www.npmjs.com/package/react-tv
MIT License
2.01k stars 148 forks source link

Uncaught Error: Argument appears to not be a ReactComponent #134

Closed robolivable closed 6 years ago

robolivable commented 6 years ago

What do you expect to happen?

Run example app without errors.

What actually happens?

Errors encountered during react lifecycle.

Which browsers are affected?

Currently running on latest version of Chrome Canary (71.0.3567.0), but I've noticed similar behavior when executing the app inside the webOS emulator.

Additional info

It appears that react-tv@^0.4.2 is causing errors during lifecycle:

Error: Argument appears to not be a ReactComponent. Keys: tag,key,type,stateNode,return,child,sibling,index,ref,pendingProps,memoizedProps,updateQueue,memoizedState,mode,effectTag,nextEffect,firstEffect,lastEffect,expirationTime,alternate,_debugID,_debugSource,_debugOwner,_debugIsCurrentlyTiming
    at invariant (bundle.js:22457)
    at Object.findHostInstance (bundle.js:32480)
    at Object.findDOMNode (bundle.js:32844)
    at t.componentWillUnmount (bundle.js:33055)
    at callComponentWillUnmountWithTimer (bundle.js:29436)
    at HTMLUnknownElement.callCallback (bundle.js:25057)
    at Object.invokeGuardedCallbackDev (bundle.js:25095)
    at invokeGuardedCallback (bundle.js:25144)
    at safelyCallComponentWillUnmount (bundle.js:29443)
    at commitUnmount (bundle.js:29689)

Downgrading to react-tv@^0.3.4 is currently my only workaround for this issue.

See this project for reproducing this issue (see branch custom/issue-134-reproducible): https://github.com/robolivable/TTV4TV/tree/custom/issue-134-reproducible

Side note: I can't seem to find the source files for version 0.4.2 of react-tv. The latest here seems to be 0.4.1 ... Is this an intended deployment?

Screenshots

screen shot 2018-10-01 at 6 55 03 pm
wyeo commented 6 years ago

This is an issue for react-tv-navigation

raphamorim commented 6 years ago

weird, I thought that was fixed in 0.4.2. Let me take a look.

raphamorim commented 6 years ago

@robolivable what's the react version that you're using?

robolivable commented 6 years ago

Should be ^16.2.0. I believe you should be able to get a reproducible example up and running by following the steps in the README of this branch: https://github.com/robolivable/TTV4TV/tree/custom/issue-134-reproducible

lambertkevin commented 6 years ago

We got the same issue here at the first build of the app generated by the cli.

Any idea how we can help you fix this?

lambertkevin commented 6 years ago

I might be heading in the wrong direction but it looks like the problem actually comes from react-tv. When findDOMNode returns nothing, it's because ReactTVFiberRenderer.findHostInstance try to get a _reactInternalFiber property from the get function, but the fiberNode instance that we give it as parameter hasn't any _reactInternalFiber property. The findCurrentHostFiber then returns null and terminates the findHostInstance function.

lambertkevin commented 6 years ago

Ok fixed it, i'll do a PR for you to test it!

Turns out findHostInstance is trying to get the fiberNode from the component given as parameter, except the element that is given to him is already a fiberNode!

raphamorim commented 6 years ago

I released a react-tv@0.4.3, react-tv-navigation@0.4.3 and react-tv-cli@0.4.3 with @KevinMolotov changes/fix for that issue. Let me know if doesn't work and thanks for opening the issue.