TypeError: Cannot read property 'document' of undefined

[sanjeevaniekv]

I installed the package with npm install and then started the server. Then I imported the package and added the code within render function;

<ReactPhoneInput defaultCountry={'au'} onChange={this.handleOnChange}/>

Everything worked fine and nicely.

Then I stopped the server and started it again and ended up with the following error. I tried several times and I always get this error and I couldn't start my server.

TypeError: Cannot read property 'document' of undefined
at Object.i (C:\Users...\node_modules\react-phone-input-2\dist\index.js:2:25894)

The error is always pointed to n.document=e.document||{} at the end of the second line of the above file.

When I try it in https://npm.runkit.com/react-phone-input-2, I get the same error. Am I doing it wrong or is there any configuration I need to do or is it really a bug?

I really want to make it work on my website as this is the best country code selector I found and appreciate any help or response.

[bl00mber]

Node.js execution is determined. Result can't be different on different runtimes without file structure modification. So you probably should debug your application.

[RubtsovAV]

@bl00mber I have the same issue.

[Lurtt]

have you guys using next.js or some ssr framework?
I had same issue with next.js and ssr

you can fix it in next.js by this "hack"

import dynamic from 'next/dynamic'

const ReactPhoneInput = dynamic(import('react-phone-input-2'), {
  ssr: false,
})

...
<ReactPhoneInput
  id="tel"
  name="tel"
  defaultCountry="se"
  value={mobile}
  onChange={handlePhoneChange}
  inputClass="input"
  enableLongNumbers
/>
...

[rajagopal-cooper]

Using ssr here. any luck with this issue?

[sedenardi]

This module seems unusable with server-side rendering due to https://github.com/bl00mber/react-phone-input-2/blob/master/src/index.js#L104 and related calls.

[sanjeevaniekv]

have you guys using next.js or some ssr framework?
I had same issue with next.js and ssr

Yes, I am using Razzle. I guess it is the problem here. This library doesn't support ssr.

[bl00mber]

@sedenardi are you sure? I have removed this for now.

[sedenardi]

@bl00mber I see your last commit removed the offending code I was referring to. Unfortunately, at the moment I'm not able to verify it solved the SSR issue due to my own project's time constraints.

Nevertheless, thanks for your help with this issue. I'll certainly reply back if/when I have a chance to evaluate this awesome module in my own project.

[vgarzom]

hi, any luck? same problem here. Thanks in advance.

[vgarzom]

I could solved it with the solution presented here: sample-usr/react-phone-input#30 (comment)

Although this is not an elegant solution, it worked for me. Here is the resulting code:

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

and renderPhone function:

renderPhone = () => {
    if (typeof window === 'undefined') {
        return;
    }
    let ReactPhoneInput = require('react-phone-input-2').default;
    return (
      <ReactPhoneInput ... />
    )
}

[bl00mber]

@vgarzom what version of react-phone-input-2 do you use?

[vgarzom]

Hi @bl00mber I'm currently using version 2.8.0