search

sample-usr / react-phone-input

A simple react component to format phone number as the user types
MIT License
88 stars 80 forks source link

Doesn't work with Server Rendering #30

Open mienaikoe opened 7 years ago

mienaikoe commented 7 years ago

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 commented 7 years ago

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

aconital commented 7 years ago

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

sample-usr commented 7 years ago

@aconital not at the moment.

piupiupiu commented 6 years ago

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.