修改package.json的name字段致React DevTools崩溃（cross-unzip异常）

问题根源 #

1. electron-react-webpack-boilerplate 内部会将 package.json 的 name 字段用作 React DevTools 解压缓存、Electron 应用数据目录的标识，修改 name 后，旧缓存残留或路径不匹配导致 DevTools 解压失败（对应报错中的 cross-unzip 退出码2）。
2. 你硬编码了 %APPDATA%\testapp 作为自定义数据目录，修改 name 后，Electron 默认的应用缓存目录（%APPDATA%\[新name]）与自定义目录产生逻辑冲突，导致脚手架错误将 DevTools 缓存写入了你的自定义目录。

解决方案 #

1. 清理 React DevTools 残留缓存 #

手动删除以下路径中的缓存文件：

• 脚手架本地缓存：项目根目录/node_modules/.cache/react-devtools
• Electron 全局 DevTools 缓存：%LOCALAPPDATA%/electron/Cache 或 %APPDATA%/[你的旧name]/DevTools Extensions

2. 替换硬编码数据目录为 Electron 规范路径 #

不要直接使用 process.env.APPDATA 拼接固定目录，改用 Electron 提供的 app.getPath('userData') 获取符合规范的用户数据目录，该路径会自动与 package.json 的 name 同步：

// App.js 中的 useEffect 修改如下
import { useEffect } from 'react';

useEffect(() => {
  // 渲染进程中需通过 remote 模块获取 app 对象（Electron 14+ 需在主进程启用 remote）
  const { app } = window.require('electron').remote;
  const userDataPath = app.getPath('userData');
  
  // 基于默认用户数据目录创建自定义子文件夹
  const fs = require('fs');
  const path = require('path');
  const customDir = path.join(userDataPath, 'app-data');
  
  if (!fs.existsSync(customDir)) {
    fs.mkdirSync(customDir, { recursive: true });
  }
  
  // 写入 JSON 文件示例
  const data = { config: 'default' };
  fs.writeFileSync(path.join(customDir, 'settings.json'), JSON.stringify(data));
}, []);

如果是 Electron 14 及以上版本，需在主进程的 main.js 中启用 remote 模块：

// main.js
const { app, BrowserWindow } = require('electron');
require('@electron/remote/main').initialize();

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  });

  require('@electron/remote/main').enable(mainWindow.webContents);
  
  // 其他窗口初始化代码...
}

3. 确保 package.json 的 name 符合规范 #

name 字段必须由小写字母、数字、连字符或下划线组成，不能包含大写、空格或特殊字符，否则会导致 Electron 路径解析错误。

4. 重新安装依赖并启动 #

清理旧依赖后重新安装：

# 删除 node_modules 和锁文件
rm -rf node_modules package-lock.json yarn.lock
# 重新安装依赖
npm install # 或 yarn install
# 启动项目
npm start # 或 yarn start

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