Vaadin23+SpringBoot2.7.6中intl-tel-input i18n模块导入失败

AI 小北

2026-6-21

解决intl-tel-input国际化模块导入TypeScript报错问题

1. 核对包的导出路径配置

intl-tel-input的npm包若在package.json的exports字段中未声明i18n子模块的映射规则，会导致TypeScript无法解析导入路径。你可以直接查看本地node_modules/intl-tel-input/package.json的exports节点：

若未找到./i18n/*相关配置，直接使用本地文件的完整相对路径导入：
```
import fr from 'intl-tel-input/build/js/i18n/fr';
```
注意匹配本地文件结构，确认目标文件是fr.js（intl-tel-input的i18n文件为JS格式）。

2. 修正TypeScript类型声明

修改types.d.ts时，需准确声明i18n模块的类型：

// 通用匹配所有i18n模块
declare module 'intl-tel-input/i18n/*' {
  const translations: Record<string, string>;
  export default translations;
}

// 或针对具体路径声明
declare module 'intl-tel-input/build/js/i18n/fr' {
  const fr: Record<string, string>;
  export default fr;
}

同时确保tsconfig.json的include字段包含该类型文件：

{
  "include": [
    "src/**/*",
    "./types.d.ts"
  ]
}

3. 调整Vaadin的Vite构建配置

Vaadin 23使用Vite作为前端构建工具，可能存在路径解析限制，可通过添加别名解决：
在vite.config.ts中添加别名映射：

import { defineConfig } from 'vite';

export default defineConfig({
  resolve: {
    alias: {
      'intl-tel-input/i18n': 'intl-tel-input/build/js/i18n'
    }
  }
});

修改后重启Vaadin开发服务器，让配置生效。