使用Webpack集成i18n库编译应用时遇JSON解析错误求助

你在通过bundle-loader懒加载葡萄牙语翻译JSON文件时遇到的这个错误，核心问题是JSON解析失败——提示位置0有意外的'm'字符，大概率是JSON文件本身有语法问题，或者Webpack对JSON文件的处理配置出了岔子。我给你一步步梳理排查方案：

第一步：先排查JSON文件本身的问题 #

这是最常见的诱因，错误里的"Unexpected token m"说明你的translation.json开头第一个字符不是JSON规范要求的{或[，而是'm'开头的内容。你可以这么做：

• 直接打开./src/locales/pt/translation.json，检查是不是不小心写了注释（JSON不支持//或/* */这类注释），或者误输入了类似module的单词开头；
• 把文件内容复制到浏览器控制台，执行JSON.parse('你的文件内容')，能快速定位语法错误（比如字符串没闭合、多余逗号、引号不匹配等）。

第二步：检查Webpack的JSON处理配置 #

Webpack 4及以上版本默认支持解析JSON，但如果你的配置覆盖了默认规则，就可能出问题：

• 打开webpack.config.js，查看module.rules里有没有针对.json文件的规则，确保配置正确：
  • Webpack 4/5推荐用type: 'json'处理，示例配置：

    module.exports = {
      module: {
        rules: [
          // 其他loader规则...
          {
            test: /\.json$/,
            type: 'json'
          }
        ]
      }
    };
    

  • 如果你用的是Webpack 3及更早版本，需要先安装json-loader，再配置loader: 'json-loader'。

第三步：确认bundle-loader的用法与兼容性 #

• 确保你导入懒加载JSON的方式正确，bundle-loader会返回一个加载函数，正确调用示例：

  import loadPtTranslation from 'bundle-loader?lazy&name=lang-pt!./src/locales/pt/translation.json';
  
  // 需要加载葡萄牙语翻译时调用该函数
  loadPtTranslation((ptTrans) => {
    // 在此使用ptTrans中的翻译内容
  });
  

• 检查bundle-loader版本，确保它和你的Webpack版本兼容（比如Webpack 5需要bundle-loader@^0.5.6及以上），版本不匹配的话可以更新：npm install bundle-loader@latest --save-dev

建议先从第一步开始排查，JSON文件的语法错误是最容易出现的，解决后再看配置和loader的问题。

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