Next.js 14: ReferenceError: window is not defined when using intl-tel-input-react

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

  1. Added ‘use client’ directive at the top of the file
  2. 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!