create-react-app项目中Webpack动态导入Babel React Intl生成的翻译文件报错

我来帮你搞定这个问题，之前在create-react-app项目里用React Intl做国际化时，也遇到过一模一样的Webpack路径报错。咱们一步步来排查和解决：

1. 先检查文件路径的基础问题 #

Webpack报Module not found，最常见的原因是路径写法不对：

• 如果你把translations文件夹放在src目录下（比如src/translations/en.json），直接写import('translations/en.json')会让Webpack误以为你要从node_modules里找这个模块，自然找不到。
• 正确的写法应该用相对路径：

  export const getTranslations = (language) => {
    return import(`./translations/${language}.json`).then(messages => {
      // 注意：JSON文件导入后默认是default导出，所以要取messages.default
      return messages.default;
    });
  }
  

2. 配置别名（可选，避免写长相对路径） #

如果不想每次都写./translations，可以给这个目录配置Webpack别名。因为create-react-app默认隐藏了Webpack配置，咱们可以用craco或者react-app-rewired来修改：

• 先安装craco：npm install @craco/craco --save-dev
• 在项目根目录创建craco.config.js，添加别名配置：

  const path = require('path');
  
  module.exports = {
    webpack: {
      alias: {
        'translations': path.resolve(__dirname, 'src/translations/')
      }
    }
  };
  

• 修改package.json里的启动脚本，把react-scripts换成craco：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

  这样你就可以直接用import('translations/en.json')了。

3. 确保React Intl正确生成翻译文件 #

还要确认Babel React Intl插件确实把待翻译字符串生成到了translations目录：

• 检查你的Babel配置（如果用craco，就在craco.config.js的babel字段里配置）：

  module.exports = {
    babel: {
      plugins: [
        [
          'react-intl',
          {
            messagesDir: './src/translations/messages/', // 先把提取的零散消息放在这里
            extractSourceLocation: true
          }
        ]
      ]
    },
    // ... 之前的webpack别名配置
  };
  

• 然后用FormatJS的CLI工具把零散的messages合并成语言文件：
  安装工具：npm install @formatjs/cli --save-dev
  添加脚本到package.json：

  "scripts": {
    // ... 其他脚本
    "build:messages": "formatjs compile-folder src/translations/messages src/translations --format simple --out-file en.json"
  }
  

  运行npm run build:messages后，就能在src/translations下得到合并好的en.json了。

4. 动态导入的注意事项 #

• 动态导入用模板字符串时，Webpack需要能提前预判可能的文件，所以language参数最好是固定的枚举值（比如'en'、'zh-CN'），不要传任意字符串，否则Webpack没法正确打包对应的chunk。
• 如果是区分大小写的系统（比如Linux），要确保文件名和代码里的拼写完全一致（比如en.json不能写成EN.json）。

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