从Linux迁移至Windows11后React项目编译失败：JSON解析错误

问题根源 #

你的products.JSON文件内容开头是module.exports = ...，这不是标准JSON格式，而是CommonJS模块的导出语法。React编译工具（如webpack）尝试用JSON解析器处理这类非标准内容时，自然会触发解析错误。大概率是Linux到Windows迁移过程中，文件被自动转译，或是导入方式不规范触发了工具的错误处理逻辑。

具体修复步骤 #

• 检查并修正文件内容：打开src/Componets/shop/products.JSON，如果文件里有module.exports =这类代码，直接删掉该行，只保留纯JSON结构（以{或[开头的对象/数组）。
• 统一文件名与导入路径大小写：Windows文件系统默认不区分大小写，但React编译工具会严格校验。把文件名改成products.json（小写后缀），同时修正代码里的导入语句，确保路径和文件名大小写完全匹配：

  // 错误示例：大小写不匹配
  import products from './products.JSON'
  // 正确写法：和文件名一致
  import products from './products.json'
  

• 校验webpack配置（自定义过的情况）：如果项目手动配置了webpack，确认module.rules里有正确处理JSON文件的规则，示例配置如下：

  module: {
    rules: [
      {
        test: /\.json$/i,
        type: 'json/module',
        parser: {
          parse: JSON.parse,
        },
      },
    ],
  }
  

• 清除缓存重新编译：Windows下npm/yarn的缓存可能残留旧文件，执行以下命令清理后重启项目：

  npm cache clean --force
  # 用yarn的话执行：yarn cache clean
  

  接着删除node_modules和package-lock.json（或yarn.lock），重新安装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

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