Corey Chiu

Next.js webpack.cache.PackFileCacheStrategy打包失败问题解决

最近在运行本地的一些next.js项目时，经常出现

<w> [webpack.cache.PackFileCacheStrategy] Caching failed for pack: Error: Unable to snapshot resolve dependencies

的问题。

我的项目环境：

  • Next.js 14.2.9
  • pnpm 9.12.3
  • node v23.5.0

经过排查，问题有这些特征

  • 本地pnpm build/dev时都会有，但线上版本不会有
  • 多个项目都有这个问题
  • 只在我的笔记本上有，同一个项目在家里的电脑就不会有

因此初步断定为本机pnpm/webpack配置的问题，非项目的问题

经过网上多番搜索、问AI、以及群友寻求帮助，一共试了多个方案，最后终于成功解决，以下记录一下我的经历，希望对大家有帮助。

解决方案

  1. 清除缓存重新构建（对我没用）
# 清理构建缓存
rm -rf .next
rm -rf node_modules/.cache

# 清理依赖
rm -rf node_modules
rm pnpm-lock.yaml

# 清理 pnpm 存储
pnpm store prune

# 重新安装依赖
pnpm install

# 清理构建缓存后重新构建
pnpm build

这个方案对我不生效，使用完后还是会出现这个问题

  1. 删除重复的依赖包，优化依赖树结构（对我没用）
# 删除重复的依赖包
pnpm dedupe

# 重新安装依赖
pnpm install

# 重新构建
pnpm build

这个方案对我不生效，使用完后还是会出现这个问题

  1. 使用turbopack而不是webpack（对我没用）

修改next.config.mjs配置文件

{{ ... }}
const configWithMDX = {
  ...nextConfig,
  experimental: {
    mdxRs: true,
    turbo: {
      // 启用 Turbopack
      enabled: true
    }
  },
};
{{ ... }}

这个方案对我不生效，使用完后还是会出现这个问题

  1. 修改webpack配置,禁用webpack缓存（有用）

修改next.config.mjs配置文件

{{ ... }}
const nextConfig = {
  output: "standalone",
  reactStrictMode: false,
  pageExtensions: ["ts", "tsx", "js", "jsx", "md", "mdx"],
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "*",
      },
    ],
  },
  webpack: (config, { isServer }) => {
    // 禁用 webpack 缓存以解决构建问题
    config.cache = false;
    return config;
  },
  async redirects() {
    return [];
  },
};
{{ ... }}

这个方案是有用的

  1. 换用yarn，不用pnpm（没尝试）

理论上可以直接规避问题，不过我一直用的pnpm，所以未尝试