如何解决Lingui Macro未导出Trans组件问题（不使用@lingui/react的Trans）

错误原因 #

@lingui/macro中的Trans是编译时宏，并非运行时可直接导入的组件。如果未配置对应的编译插件（如Vite/Babel插件），编译工具会直接尝试导入这个不存在的导出，从而触发报错。

解决方案 #

1. 安装Lingui Vite编译插件 #

由于你的项目基于Vite构建，需安装@lingui/vite-plugin：

npm install @lingui/vite-plugin --save-dev

2. 配置Vite插件 #

在vite.config.ts中添加Lingui插件配置：

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

export default defineConfig({
  plugins: [
    react(),
    lingui() // 加入该插件
  ]
});

3. 确保宏的正确使用 #

你的Test组件代码写法本身没问题，但需保证编译流程能处理宏语法。编译完成后，@lingui/macro的Trans会被替换为底层国际化调用逻辑，无需依赖@lingui/react的Trans组件。

4. 重新提取并编译语言消息 #

运行Lingui的提取与编译命令，确保语言消息被正确收集处理：

npm run lingui extract
npm run lingui compile

验证 #

重启Vite开发服务器，此时Trans宏会被正确编译，报错应消失。

额外注意事项 #

• 确保Lingui版本为v4及以上（v4起使用@lingui/vite-plugin，v3依赖Babel插件）
• 不要将@lingui/macro的导出作为运行时组件直接引用，宏仅在编译阶段生效

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