Next.js: Passing Functions as Props in getInitialProps

[attapurposevc]

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Hi Everyone,

I have this minimalistic example

const myFunction = (x) => (x * 2)

export default class Page extends React.Component {
  static async getInitialProps(props) {
    return {
      foo: 'Hello World',
      bar: x => myFunction(x),
    }
  }

  render() {
    return (
      <div>
        {this.props.foo}
        {this.props.bar(21)}
      </div>
    )
  }
}

Of course I'm expecting "Hello World 42" but the bar prop doesn't get passed. I am assuming next doesn't support passing functions in getInitialProps, but I couldn't find it in the documentation.

Expected Behavior

• If we don't support this, can we have better error messages? My actual example was more complicated, so it took me a while to figure out what was causing it.

Current Behavior

• Currently I'm getting:

TypeError: this.props.bar is not a function
    at Page.render (page.js?8081a23:131)
    at Page.render (createPrototypeProxy.js?b9f4a89:44)
    at finishClassComponent (react-dom.development.js?3fc7954:7873)
    at updateClassComponent (react-dom.development.js?3fc7954:7850)
    at beginWork (react-dom.development.js?3fc7954:8225)
    at performUnitOfWork (react-dom.development.js?3fc7954:10224)
    at workLoop (react-dom.development.js?3fc7954:10288)
    at HTMLUnknownElement.callCallback (react-dom.development.js?3fc7954:542)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?3fc7954:581)
    at invokeGuardedCallback (react-dom.development.js?3fc7954:438)

However only when it is rendering on the client side. On the server the bar prop gets passed without any problems.

• This is a mismatch between rendering on the server and the client.

Steps to Reproduce (for bugs)

See snippet

Context

I don't know if we are able to support this at all, but it would be really helpful if a solution is available. I'm working on a headless CMS and I need to be able to render my react components on the server and on the client.

Is there a workaround?

Your Environment

| Tech | Version |
|---------|---------|
| next | 4.2.1 |
| react | 16.0.0 |
| node | v8.9.1 |
| OS | osX |
| browser | Chrome |

[sergiodxa]

Is not possible, the props are serialized with JSON.stringify to share it between server and client and a function can't be serialized in a JSON.

Here you can read

Data returned from getInitialProps is serialized when server rendering, similar to a JSON.stringify. Make sure the returned object from getInitialProps is a plain Object and not using Date, Map or Set.

[skitterm]

@sergiodxa thanks for the clarification. Would it be possible to update the docs to include function along with Date, Map, and Set? Now that I think about it this is obvious, but at the time I lost an hour wondering why my function was getting called when the page was rendered client-side, but not when the page was rendered server-side.

[sarneeh]

Came into the same issue 😢 It would be cool to have it somewhere in the docs.

[CaitlinWeb]

I also encountered this issue. In my case I'm trying to retain an object containing functions on both the client and server. Looks like that's not possible. Not sure what the best way to go about that is.

[karlis-filipsons]

Still no workaround?