Skip to content
This repository has been archived by the owner on Apr 13, 2023. It is now read-only.

SSR broken with react-router 3 #157

Closed
voodooattack opened this issue Aug 19, 2016 · 5 comments
Closed

SSR broken with react-router 3 #157

voodooattack opened this issue Aug 19, 2016 · 5 comments
Labels

Comments

@voodooattack
Copy link

  TypeError: Cannot read property 'params' of undefined
      at render (/home/voodooattack/dev/foxls/node_modules/react-router/lib/withRouter.js:37:26)
      at getChildFromComponent (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:18:26)
      at getQueriesFromTree (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:48:24)
      at getDataFromTree (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:65:14)
      at /home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:71:16
      at Array.map (native)
      at /home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:70:96
      at run (/home/voodooattack/dev/foxls/node_modules/core-js/modules/es6.promise.js:87:22)
      at /home/voodooattack/dev/foxls/node_modules/core-js/modules/es6.promise.js:100:28
      at flush (/home/voodooattack/dev/foxls/node_modules/core-js/modules/_microtask.js:18:9)
      at _combinedTickCallback (internal/process/next_tick.js:67:7)
      at process._tickCallback (internal/process/next_tick.js:98:9)

It seems like this might be related to #155 and #156 somehow.

@jaden-chen
Copy link

jaden-chen commented Aug 20, 2016

I encountered a similar issue as well, or likely the same issue with the same root cause.

Here is my wordy explanation:

  • When calling getDataFromTree, subsequent function calls of getChildFromComponent would trigger calling the render() function of every components that have this function defined.
  • Often times, render() function would try to read from the component's state, which means that it needs to be initialized correctly or else it would run into the TypeError that you encountered (root cause)
  • Before render() is called, in getQueriesFromTree, Component.componentWillMount(); is called which I think was an attempt to address this issue. However, even if there is this.setState(...) in componentWillMount(), React would treat the setState() as a No-Op because the component did not go through proper mounting and lifecycle.
  • Therefore, for modules that did not have this.state initialization in constructor/component or without getInitialState(ES5), the issue would occur.

I actually have a working fix which relies on using React library. I'm looking to clean it up and do a pull request. Feedback would be greatly appreciated.

@voodooattack
Copy link
Author

@jaden-chen That'd be awesome. Do you have a repo with the fix somewhere?

@jbaxleyiii
Copy link
Contributor

@jaden-chen or @voodooattack could one of you setup a reproduction or write a failing test case? I'd love to get this fixed!

@voodooattack
Copy link
Author

I will do it once I get back home :)

@jbaxleyiii
Copy link
Contributor

This should be fixed in the next version (set to release today)

If it is not, please reopen!

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

3 participants