React+Vite项目部署Netlify/Vercel时react-phone-input-2报错本地正常

问题本质 #

本地开发无异常，部署后报错，根源是react-phone-input-2及其依赖采用CommonJS模块规范，Vite生产构建的默认处理逻辑对这类模块存在兼容缺陷，导致运行时模块解析失败。

可行解决方案 #

1. 配置Vite预构建组件 #

在vite.config.js/vite.config.ts中添加优化配置，强制Vite预构建该组件，将CommonJS转为ES模块：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react-phone-input-2', 'react-phone-input-2/lib/bootstrap.css']
  }
})

2. 调整CSS导入方式 #

部分场景下静态导入CSS会触发路径解析错误，改用动态导入：

import PhoneInput from "react-phone-input-2";
// 动态导入样式文件
import("react-phone-input-2/lib/bootstrap.css");

或者切换为组件提供的其他样式（如Material风格）测试：

import "react-phone-input-2/lib/material.css";

3. 对齐依赖版本 #

若上述方案无效，尝试调整组件版本到已知兼容Vite的稳定版：

# 安装兼容版本
npm install react-phone-input-2@2.15.0

验证流程 #

• 本地执行npm run build，确认构建无报错
• 运行vite preview预览生产打包后的页面，检查组件功能
• 重新部署到Netlify/Vercel，确认控制台无错误

内容的提问来源于stack exchange，提问作者Steven