Next.js: getInitialProps converting Map to Array

[IanMitchell]

I'm trying to load a Map in one of my sites, and noticed that on the client side it's converted into an Array.

function initialProps() {
  const props = new Map()
  props.set('key', 'value')
  return props
}


export default class extends React.Component {
  static async getInitialProps() {
    console.log('Get Initial Props')
    console.log(initialProps())

    return {
      map: initialProps()
    }
  }

  render() {
    console.log(this.props)

    return (
      <div>
        <p>Keys: { [...this.props.map.keys()].length }</p>
      </div>
    )
  }
}

When you visit this page in Next, in your terminal you'll see

Get Initial Props
Map { _c: Map { 'key' => 'value' } }
{ map: Map { _c: Map { 'key' => 'value' } },
  url: ...
  }

And in the browser you'll see:

map: [Array(2)]

[timneutkens]

This is expected behaviour since the data from getInitialProps is serialised before being sent to the client. You can check the source of your app for __NEXT_DATA__.
https://github.com/zeit/next.js/blob/canary/server/document.js#L185

[IanMitchell]

I'm not sure changing data types from under me is expected behavior - at the very least, it should be noted in the documentation that getInitialProps should only use a subset of datatypes in its return value

[timneutkens]

@IanMitchell Created a pull request: #3516, you're right that we should document it better!

[IanMitchell]

Thanks!