search

diegohaz / arc

React starter kit based on Atomic Design
https://arc.js.org
2.92k stars 292 forks source link

Useless debugging? #221

Closed Geczy closed 7 years ago

Geczy commented 7 years ago

Because of router.context and the way we're loading components etc, when I see an error in my console.log it's extremely difficult to find the actual cause of the error.

For example, there's some error in my Modal but the actual stacktrace is useless. 

warning.js:36 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HomePage`.
    in HomePage (created by RouterContext)
    in ThemeProvider (created by App)
    in App (created by RouterContext)
    in RouterContext (created by Router)
    in Router
    in Provider
printWarning @ warning.js:36
warning @ warning.js:60
createElement @ ReactElementValidator.js:190
patchedCreateElement @ patch.dev.js:164
HomePage @ index.js:8
instantiate @ createClassProxy.js:91
HomePage @ VM11727:4
(anonymous) @ ReactCompositeComponent.js:306
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_constructComponentWithoutOwner @ ReactCompositeComponent.js:305
_constructComponent @ ReactCompositeComponent.js:280
mountComponent @ ReactCompositeComponent.js:188
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
performInitialMount @ ReactCompositeComponent.js:371
mountComponent @ ReactCompositeComponent.js:258
mountComponent @ ReactReconciler.js:46
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:140
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:140
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:320
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
./src/index.js @ index.js:24
__webpack_require__ @ bootstrap 09d6b6f…:657
fn @ bootstrap 09d6b6f…:85
0 @ selectors.js:3
__webpack_require__ @ bootstrap 09d6b6f…:657
./node_modules/ansi-html/index.js.module.exports @ bootstrap 09d6b6f…:706
(anonymous) @ app.09d6b6f….js:710
invariant.js:44 Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of `HomePage`.
    at invariant (invariant.js:44)
    at instantiateReactComponent (instantiateReactComponent.js:74)
    at instantiateChild (ReactChildReconciler.js:44)
    at ReactChildReconciler.js:71
    at traverseAllChildrenImpl (traverseAllChildren.js:77)
    at traverseAllChildrenImpl (traverseAllChildren.js:93)
    at traverseAllChildren (traverseAllChildren.js:172)
    at Object.instantiateChildren (ReactChildReconciler.js:70)
    at ReactDOMComponent._reconcilerInstantiateChildren (ReactMultiChild.js:187)
    at ReactDOMComponent.mountChildren (ReactMultiChild.js:226)
diegohaz commented 7 years ago

Hey, @Geczy

Could you please paste the HomePage render code?

Geczy commented 7 years ago

The issue was in HomePage render, I was importing TermModal and not { TermModal }, so maybe nevermind on this issue