Next.js使用getStaticProps后报错：请求的chunk不在缓存中

此前代码运行正常，添加getStaticProps并设置5天缓存时长后，出现以下错误：

error - node:internal/modules/esm/module_job:123
        this.module.instantiate();
                    ^
Error: request for './chunk-NO6MRLPK.mjs' is not in cache
    at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
    at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
    at async Promise.all (index 0)
    at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
    at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15) {
  code: 'ERR_VM_MODULE_LINK_FAILURE',
  page: '/'
}

项目配置 #

package.json #

{
  "name": "unipos-web",
  "version": "0.1.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "ts-lint": "tsc --noEmit --incremental --watch",
    "format": "prettier --check --ignore-path .gitignore .",
    "format:fix": "prettier --write --ignore-path .gitignore ."
  },
  "dependencies": {
    "@chakra-ui/icons": "^2.0.3",
    "@chakra-ui/react": "^2.4.3",
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@reduxjs/toolkit": "^1.8.5",
    "@tanstack/react-query": "^4.20.4",
    "@tanstack/react-query-devtools": "^4.20.4",
    "axios": "^1.2.1",
    "ethers": "^5.7.2",
    "formik": "^2.2.9",
    "framer-motion": "^7.6.7",
    "html5-qrcode": "^2.3.4",
    "next": "^13.0.7",
    "next-redux-wrapper": "^8.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-error-boundary": "^3.1.4",
    "react-qr-code": "^2.0.7",
    "react-redux": "^8.0.2",
    "react-select": "^5.5.0",
    "react-web-share": "^2.0.2",
    "siwe": "^1.1.6",
    "socket.io-client": "^4.5.3",
    "wagmi": "^0.9.2",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@types/node": "^18.0.3",
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
    "eslint": "^8.30.0",
    "eslint-config-next": "13.1.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-prettier": "^4.2.1",
    "prettier": "^2.8.1",
    "typescript": "^4.9.4"
  },
  "overrides": {
    "siwe": {
      "ethers": "$ethers"
    }
  }
}

next.config.cjs #

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: false,
  env: {
    ENV: process.env.ENV,
    INFURA_API_KEY: process.env.INFURA_API_KEY,
  },
}

已尝试的解决方案 #

• 删除.next、node_modules和package-lock.json后重新安装依赖
• 移除代码中的getStaticProps及react-query相关代码
• 将next.config.js改为next.config.mjs
• 修复所有TS和ESLint错误
• 尝试运行无缓存/SSR版本，仍报错
• 清理npm缓存、浏览器缓存
• 使用nvm安装最新Node.js版本，降级Next.js至13.1.0和13.0.7
• 更换开发服务器端口、使用无痕模式访问
• 构建项目时同样出现该错误
• 全新create-next-app项目可正常运行

针对性解决方案 #

1. 统一模块系统配置 #

你的package.json设置了"type": "module"，但next.config用的是CommonJS后缀（.cjs），可能引发模块解析冲突。尝试：

• 将next.config.cjs改为next.config.mjs，并把module.exports改为export default：

  /** @type {import('next').NextConfig} */
  export default {
    reactStrictMode: false,
    env: {
      ENV: process.env.ENV,
      INFURA_API_KEY: process.env.INFURA_API_KEY,
    },
  }
  

2. 禁用SWC缓存 #

在next.config.mjs中添加SWC缓存禁用配置，避免缓存异常：

export default {
  // 原有配置
  swcMinify: false,
  experimental: {
    cacheUnaffected: false,
  },
}

删除.next文件夹后，重新启动开发服务器。

3. 调整getStaticProps缓存时长 #

过长的revalidate时间可能触发Next.js静态生成的缓存逻辑异常，先改为较短值测试：

export async function getStaticProps() {
  // 你的数据获取逻辑
  return {
    props: { /* 数据 */ },
    revalidate: 60, // 临时改为60秒
  }
}

4. 排查第三方依赖兼容性 #

部分区块链相关依赖（如ethers、wagmi）可能存在ESM支持不完善的情况，尝试：

• 移除package.json中的"type": "module"，切换回CommonJS模式，将next.config.mjs改回next.config.cjs，重新安装依赖测试。

5. 彻底清理缓存并重建 #

执行以下命令强制清除所有缓存后重新构建：

rm -rf .next node_modules package-lock.json
npm cache clean --force
npm install
npm run build
npm run start

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