使用react-intl与babel-plugin-formatjs提取变量型默认消息失败

问题场景 #

在Create React App项目中，使用react-intl、babel-plugin-formatjs和@formatjs/cli提取<FormattedMessage />组件中的国际化消息时，遇到以下问题：

• 当defaultMessage为字符串字面量时，生成的JSON文件格式符合预期：

{
  "hak27d": {
    "defaultMessage": "Control Panel"
  },
  "haqsd": {
    "defaultMessage": "Delete user {name}"
  }
}

• 当defaultMessage通过变量传入时，生成的JSON中对应条目丢失defaultMessage字段：

{
  "roi-carousel-title": {}
}

示例代码：

<h1>
  <FormattedMessage
    id="roi-carousel-title"
    defaultMessage={messages.title}
  />
</h1>

已完成的配置 #

1. babel.config.json配置：

{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true
      }
    ]
  ]
}

2. package.json脚本：

{
  "scripts": {
    ...
    "extract": "formatjs extract"
  }
}

3. 执行提取命令：

npm run extract -- 'src/**/*.ts*' --ignore='**/*.d.ts' --out-file lang/en.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'

解决方案 #

1. 开启消息调用提取功能 #

babel-plugin-formatjs默认只能识别字面量形式的defaultMessage，若变量是通过defineMessages定义的消息，需开启extractFromMessageCall配置，让插件追踪变量对应的消息内容：

修改babel.config.json：

{
  "plugins": [
    [
      "formatjs",
      {
        "idInterpolationPattern": "[sha512:contenthash:base64:6]",
        "ast": true,
        "extractFromMessageCall": true
      }
    ]
  ]
}

同时确保变量来自defineMessages定义：

import { defineMessages } from 'react-intl';

const messages = defineMessages({
  title: {
    id: 'roi-carousel-title',
    defaultMessage: '轮播标题'
  }
});

2. 非defineMessages变量的处理 #

若变量不是来自defineMessages，编译时插件无法获取变量的实际值，可选择两种方式：

• 将defaultMessage改为字符串字面量；
• 手动维护缺失的defaultMessage字段到生成的JSON文件中。

3. Codesandbox提取失败的修复 #

沙箱中生成空JSON的原因通常是依赖未正确安装或babel配置未生效：

• 确保安装babel-plugin-formatjs、@formatjs/cli和react-intl依赖；
• 确认babel.config.json位于项目根目录，且沙箱已加载该配置。

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