React导入JSON提示需合适loader但已安装json-loader报错排查

Webpack v2及以上版本已经内置了JSON文件解析能力，不需要额外安装和配置json-loader。
你配置json-loader之后的执行逻辑出现了冲突：

1. .json文件首先被json-loader处理，输出一段CommonJS格式的JS代码：module.exports = {"foo":"bar", ...}
2. Webpack内置的JsonParser默认会把所有.json后缀的文件当成纯JSON格式来解析，它收到json-loader输出的JS代码后，尝试用JSON.parse解析内容，代码开头第一个字符是m（对应module的首字母），不符合JSON语法，直接抛出你遇到的报错。

当你删掉json-loader的配置后，Webpack直接调用内置的JSON解析能力处理.json文件，会直接把JSON内容转换成JS对象输出，所以不管是import还是require语法都能正常拿到结果。

就算你用行内写法require('json-loader!./foo.json')，Webpack还是会把loader输出的内容交给内置的JsonParser解析，依然会触发语法错误。如果你一定要强制使用json-loader，可以额外配置关闭内置的JSON解析逻辑：

module.exports = {
  // 其他配置保持不变
  module: {
    rules: [
      // 其他loader规则保持不变
      {
        test: /\.json$/,
        type: 'javascript/auto', // 关闭Webpack内置的JSON解析，把当前匹配的文件当成普通JS处理
        use: 'json-loader'
      }
    ]
  }
}

当前所有维护中的Webpack版本都默认支持JSON文件的导入解析，完全不需要额外引入json-loader，直接移除相关依赖和配置即可，不会影响JSON文件的正常使用。

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