Next.js 14中使用intl-tel-input-react出现ReferenceError: window is not defined错误的解决方案咨询

我之前也碰到过一模一样的问题！哪怕加了'use client'指令还是报错，其实根源是intl-tel-input这个库在模块加载阶段就会尝试访问window对象——而Next.js的客户端组件虽然是在客户端运行，但服务器端预渲染的时候依然会解析组件的依赖模块，这时候就触发了错误。

下面是我亲测有效的解决办法：

1. 用Next.js的dynamic动态导入并禁用SSR #

通过动态导入的方式，让这个组件完全跳过服务器端渲染，只在客户端浏览器环境中加载。具体代码如下：

'use client';

import dynamic from 'next/dynamic';

// 动态导入intl-tel-input组件，禁用服务器端渲染
const IntlTelInput = dynamic(
  () => import('intl-tel-input/react/build/IntlTelInputWithUtils.cjs'),
  { 
    ssr: false, 
    loading: () => <input placeholder="请输入手机号" /> // 可选：添加加载占位符提升体验
  }
);

export function PhoneInput() {
  return <IntlTelInput />;
}

关键是ssr: false这个配置，它会告诉Next.js不要在服务器端渲染这个组件，只有当页面在客户端浏览器中加载完成后，才会去导入并渲染这个电话输入组件，这样就完全避开了服务器端没有window的问题。

2. 确认样式文件正确引入 #

如果你发现组件样式显示异常，要确保正确导入了intl-tel-input官方的样式文件。通常需要从库的build/css目录导入，比如：

// 替换成官方样式文件路径（如果你的自定义样式基于此，可以同时保留）
import 'intl-tel-input/build/css/intlTelInput.css';

额外注意事项 #

如果你的组件里还有其他依赖window的逻辑（比如在组件函数外部初始化某些变量），一定要把这些代码移到组件内部，或者用useEffect包裹，确保只在客户端执行：

import { useEffect } from 'react';

export function PhoneInput() {
  useEffect(() => {
    // 这里放依赖window的逻辑，比如初始化某些库的配置
  }, []);

  return <IntlTelInput />;
}

这样配置之后，应该就能顺利解决window is not defined的错误了，我当时就是这么搞定的，你可以试试看！

备注：内容来源于stack exchange，提问作者user28157837