Doesn't work with Server Rendering

[mienaikoe]

Hey there,

I use a polymorphic web server with ReactDOM.renderToString() on server-side, and ReactDOM.render() on client-side. Currently when I use react-phone-input on server-side, I get this error:

ReferenceError: document is not defined at Object.<anonymous> ([...]/node_modules/react-phone-input/dist/index.js:1:2330)

It looks like the component wasn't designed to work on the server if it requires a var provided by the browser. would love to use this on the server too so it fits with polymorphism.

I'm using version 1.1.3 of react-phone-input

[sample-usr]

@mienaikoe Yes you are right, we currently haven't modified/updated it to work with server rendering sadly.

[HiradRoshandel]

@razagill Do you guys have any plan to update it for ssr?

[sample-usr]

@aconital not at the moment.

[piupiupiu]

I come up with the following workaround solution. I used NoSSR package to conditionally load React Phone Input:

<NoSSR>
    {this.renderPhone()}
</NoSSR>

And then in renderPhone method:

  renderPhone = () => {
      let ReactPhoneInput = require('react-phone-input').default

      return (
       <ReactPhoneInput
          value={...}
          defaultCountry={...}
          onChange={...} />
      )
  }

However, this seems to be a bicycle. +1 to this requested feature.