Webpack4.5+Babel6+React16导入JSON报错：修复类型仍遇解析失败

我之前帮不少开发者解决过类似的问题，结合你给出的报错信息和环境，大概率是这几个原因之一，你可以按顺序排查：

1. 修正JSON文件的导入方式 #

你当前用的是命名导入import { Translations } from '../translations/translations.json';，但JSON模块在Webpack中的默认行为是将整个JSON对象作为默认导出，而非命名导出。你的JSON根节点是{ "en": { ... } }，根本不存在Translations这个键，错误的导入方式会触发解析异常。

改成默认导入即可：

import translations from '../translations/translations.json';
// 使用时调用 translations.en.messages.loginTitle

2. 检查JSON文件是否存在隐藏的BOM字符 #

报错提示"Unexpected token in JSON at position 0"，最常见的原因是JSON文件开头带有UTF-8 BOM（字节顺序标记）——这是Windows记事本等工具保存UTF-8文件时会自动添加的隐藏字符，Webpack解析时会把它当成非法token。

解决方法：

• 用VS Code打开JSON文件，点击右下角的编码标识（比如显示"UTF-8"）
• 选择「通过编码重新打开」，然后选「UTF-8」（不要选带BOM的选项）
• 重新保存文件

3. 确保Webpack配置正确处理JSON文件 #

Webpack 4.x默认支持JSON文件解析，但如果你的配置中存在自定义module.rules，可能不小心覆盖了默认规则，或者babel-loader的排除范围有误。

打开你的webpack.config.js，检查是否包含正确的JSON处理规则：

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // 你的Babel处理规则，确保不要排除.json文件
      {
        test: /\.jsx?$/,
        exclude: /node_modules/, // 不要写成 /node_modules|\.json$/
        use: 'babel-loader'
      },
      // 显式添加JSON处理规则（Webpack4+可选，但能避免潜在冲突）
      {
        test: /\.json$/,
        type: 'json'
      }
    ]
  }
};

4. 验证JSON语法的正确性 #

虽然你给出的片段看起来没问题，但可能存在隐藏的语法错误（比如多余的逗号、未闭合的引号）。你可以把JSON内容复制到浏览器控制台，执行JSON.parse('你的完整JSON内容')，如果控制台报错，根据提示修复语法问题即可。

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