Next.js开发构建报错：无对应平台原生构建文件的解决咨询

本地运行错误 #

⨯ Error: No native build was found for platform=darwin arch=arm64 runtime=node abi=127 uv=1 armv=8 libc=glibc
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/models/user.ts:6:65)
    at (ssr)/./src/models/user.ts (/Users/aniketh/Desktop/project/.next/server/app/page.js:646:1)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/repos/UserRepo.ts:5:73)
    at (ssr)/./src/repos/UserRepo.ts (/Users/aniketh/Desktop/project/.next/server/app/page.js:701:1)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/hooks/useReAuthenticate.tsx:9:76)
    at (ssr)/./src/hooks/useReAuthenticate.tsx (/Users/aniketh/Desktop/project/.next/server/app/page.js:591:1)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/components/organisms/Layout/AuthLayer.tsx:11:85)
    at (ssr)/./src/components/organisms/Layout/AuthLayer.tsx (/Users/aniketh/Desktop/project/.next/server/app/page.js:492:1)
    at __webpack_require__ (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at eval (./src/app/page.tsx:8:99)
    at (ssr)/./src/app/page.tsx (/Users/aniketh/Desktop/project/.next/server/app/page.js:349:1)
    at Object.__webpack_require__ [as require] (/Users/aniketh/Desktop/project/.next/server/webpack-runtime.js:33:43)
    at JSON.parse (<anonymous>)

构建预渲染错误 #

Error occurred prerendering page "/add/group". Read more: https://nextjs.org/docs/messages/prerender-error
Error: No native build was found for platform=linux arch=x64 runtime=node abi=115 uv=1 libc=glibc
    at f.path (/vercel/path0/.next/server/chunks/682.js:6:49918)
    at f (/vercel/path0/.next/server/chunks/682.js:6:48541)
    at 8090 (/vercel/path0/.next/server/chunks/682.js:6:44155)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
    at 1322 (/vercel/path0/.next/server/chunks/682.js:6:45352)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
    at 2118 (/vercel/path0/.next/server/chunks/682.js:6:44113)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)
    at 602 (/vercel/path0/.next/server/chunks/682.js:6:118032)
    at t (/vercel/path0/.next/server/webpack-runtime.js:1:128)

项目依赖配置 #

{
  "name": "project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@reduxjs/toolkit": "^2.2.7",
    "jose": "^5.6.3",
    "next": "14.2.5",
    "pouchdb": "^9.0.0",
    "pouchdb-find": "^9.0.0",
    "pouchdb-upsert": "^2.2.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hot-toast": "^2.4.1",
    "react-icons": "^5.2.1",
    "react-redux": "^9.1.2",
    "styled-components": "^6.1.12",
    "uuid": "^10.0.0",
    "zustand": "^4.5.4"
  },
  "devDependencies": {
    "@types/jsonwebtoken": "^9.0.6",
    "@types/node": "^20",
    "@types/pouchdb": "^6.4.2",
    "@types/pouchdb-find": "^7.3.3",
    "@types/pouchdb-upsert": "^2.2.9",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "@types/styled-components": "^5.1.34",
    "@types/uuid": "^10.0.0",
    "eslint": "^8",
    "eslint-config-next": "14.2.5",
    "typescript": "^5"
  }
}

已为所有page.tsx添加'use client'标识，但问题仍未解决，怀疑是pouchdb-upsert版本过时导致。

1. 替换过时的pouchdb-upsert #

pouchdb-upsert 2.2.0版本已停止维护3年，无法适配新的Node.js ABI和平台架构。可以直接用PouchDB原生API实现upsert逻辑，完全替代该插件：

// 自定义upsert函数，替代pouchdb-upsert
async function upsert(db, docId, updateFn) {
  try {
    // 尝试获取现有文档
    const existingDoc = await db.get(docId);
    // 执行更新逻辑
    const updatedDoc = updateFn({ ...existingDoc });
    // 保存更新后的文档
    await db.put(updatedDoc);
    return updatedDoc;
  } catch (error) {
    // 文档不存在时创建新文档
    if (error.status === 404) {
      const newDoc = updateFn({ _id: docId });
      await db.put(newDoc);
      return newDoc;
    }
    // 抛出其他错误
    throw error;
  }
}

// 使用示例
// await upsert(db, 'user:123', (doc) => ({ ...doc, name: 'New Name' }));

执行以下命令移除过时插件：

npm uninstall pouchdb-upsert @types/pouchdb-upsert

2. 确保PouchDB仅在客户端环境运行 #

即使页面添加了'use client'，依赖链中的PouchDB模块仍可能在服务端预渲染时被加载。需通过以下方式隔离客户端代码：

方法一：动态导入客户端组件 #

使用Next.js的next/dynamic导入包含PouchDB逻辑的组件，禁用SSR：

import dynamic from 'next/dynamic';

// 动态导入PouchDB相关组件，仅在客户端渲染
const PouchDBWrapper = dynamic(() => import('./components/PouchDBWrapper'), {
  ssr: false,
  loading: () => <div>Loading...</div>
});

方法二：判断浏览器环境初始化PouchDB #

在初始化PouchDB的代码中，先检查是否处于浏览器环境：

let db;

if (typeof window !== 'undefined') {
  // 仅在客户端导入并初始化PouchDB
  const PouchDB = require('pouchdb').default;
  PouchDB.plugin(require('pouchdb-find'));
  db = new PouchDB('local-db');
}

export default db;

3. 清理依赖并重新安装 #

旧依赖缓存可能导致平台不兼容问题，执行以下命令清理并重装：

# 删除依赖目录和锁文件
rm -rf node_modules package-lock.json
# 重新安装依赖
npm install

4. 配置Next.js Webpack排除服务端不必要的模块 #

在next.config.js中添加webpack配置，服务端打包时排除PouchDB相关模块：

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config, { isServer }) => {
    if (isServer) {
      // 服务端打包时忽略PouchDB及其插件
      config.externals.push('pouchdb', 'pouchdb-find');
    }
    return config;
  },
};

module.exports = nextConfig;

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