I’m trying to implement a phone input component in my Next.js 14 application using the intl-tel-input
library. However, I’m getting a ReferenceError: window is not defined
error during server-side rendering.
Environment:
- Next.js: 14.2.5
- React: ^18
- intl-tel-input: ^25.2.0
- Node: 18
Code:
Here’s my phone input component:
'use client';
import IntlTelInput from 'intl-tel-input/react/build/IntlTelInputWithUtils.cjs';
import './PhoneInput.css';
export function PhoneInput() {
return (
<IntlTelInput />
);
}
Error:
ReferenceError: window is not defined
The error occurs when trying to render the page containing this component. I understand this is likely due to Next.js’s server-side rendering trying to access the window
object which isn’t available on the server, but I’ve already added the 'use client'
directive to make it a client component.
What I’ve Tried
- Added ‘use client’ directive at the top of the file
- Wrapped the component with dynamic import using Next.js’s dynamic function (but wasn’t sure about the correct configuration)
How can I properly implement this phone input component in Next.js while avoiding the SSR-related window reference error?
Any help would be greatly appreciated!