Next.js 13构建Storybook 7遇EBUSY错误的解决求助

问题描述 #

在Next.js 13项目中启动或构建Storybook 7时，出现资源占用锁定错误：

[Error: EBUSY: resource busy or locked, open 'C:\Users\ali\Desktop\Works\Design Systems\projects\storybook-test2\node_modules\.cache\storybook\dev-server\a5a8bf6e622aef57065c6498611f40c911543d7d-a21314dc303cf26dabba6bf4a8fd381e47e44e94'] {
  errno: -4082,
  code: 'EBUSY',
  syscall: 'open',
  path: 'C:\\Users\\ali\\Desktop\\Works\\Design Systems\\projects\\storybook-test2\\node_modules\\.cache\\storybook\\dev-server\\a5a8bf6e622aef57065c6498611f40c911543d7d-a21314dc303cf26dabba6bf4a8fd381e47e44e94'
}

手动清除缓存文件后重新构建仍失败，项目依赖配置如下：

{
  "name": "storybook-test2",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  },
  "dependencies": {
    "@types/node": "20.5.9",
    "@types/react": "18.2.21",
    "@types/react-dom": "18.2.7",
    "eslint": "8.48.0",
    "eslint-config-next": "13.4.19",
    "next": "13.4.19",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "typescript": "5.2.2"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "^7.4.0",
    "@storybook/addon-interactions": "^7.4.0",
    "@storybook/addon-links": "^7.4.0",
    "@storybook/addon-onboarding": "^1.0.8",
    "@storybook/blocks": "^7.4.0",
    "@storybook/nextjs": "^7.4.0",
    "@storybook/react": "^7.4.0",
    "@storybook/testing-library": "^0.2.0",
    "eslint-plugin-storybook": "^0.6.13",
    "storybook": "^7.4.0"
  }
}

解决步骤 #

• 彻底终止相关进程：打开任务管理器，结束所有Node.js、Storybook、Next.js相关进程；也可以用命令行强制清理：

  taskkill /F /IM node.exe
  

• 全面清理缓存目录：除了node_modules/.cache/storybook，还要删除：
  • 项目根目录的.next文件夹
  • 若存在.storybook/cache目录也一并删除
  • 可选清理全局Node缓存：npm cache clean --force
• 重装项目依赖：删除node_modules和package-lock.json后重新安装：

  rmdir /s /q node_modules
  del package-lock.json
  npm install
  

• 自定义Storybook缓存路径：在.storybook/main.js中配置不在node_modules内的缓存目录，避免系统锁定：

  module.exports = {
    core: {
      cache: {
        directory: '../.storybook-cache'
      }
    }
  };
  

• 检查目录权限：右键项目文件夹→属性→安全→编辑，给当前用户勾选“完全控制”权限
• 临时关闭安全软件：部分杀毒、防火墙软件会锁定缓存文件，关闭后再尝试启动Storybook

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