Next.js 14项目执行npm run build时React Hook函数报错求助

我在使用Next.js 14开发项目时，执行npm run build命令时遇到错误，错误与python-course/page.tsx页面相关，已附上错误信息截图及项目的package.json配置：

{"name": "frontend","version": "0.1.0","private": true,"scripts": {"dev": "next dev","build": "next build","start": "next start","lint": "next lint"},"browser": {"child process": "false"},"dependencies": {"@clerk/nextjs": "^4.29.9","@heroicons/react": "^1.0.6","@stripe/stripe-js": "^3.2.0","@tsparticles/engine": "^3.3.0","@tsparticles/react": "^3.0.0","@tsparticles/slim": "^3.3.0","axios": "^1.6.7","body-parser": "^1.20.2","child_process": "^1.0.2","child-process": "^1.0.2","clerk": "^0.8.3","clsx": "^2.1.0","dotenv": "^16.4.5","express": "^4.19.2","firebase": "^10.0.0","react-firebase-hooks": "^5.1.1","framer-motion": "^11.0.12","isomorphic-unfetch": "^3.0.0","mini-svg-data-uri": "^1.4.4","mongodb": "^6.5.0","mongoose": "^8.3.0","next": "14.0.4","raw-body": "^2.5.2","react": "^18","react-dom": "^18","react-icons": "^5.0.1","react-monaco-editor": "^0.55.0","react-resizable": "^3.0.5","react-split": "^2.0.14","sharp": "^0.33.2","stripe": "^14.23.0","swr": "1.1.2","tailwind-merge": "^2.2.1","unfetch": "^5.0.0"},"devDependencies": {"@types/node": "^20","@types/raw-body": "^2.3.0","@types/react": "^18","@types/react-dom": "^18","autoprefixer": "^10.0.1","eslint": "^8","eslint-config-next": "14.1.0","postcss": "^8","tailwindcss": "^3.3.0","typescript": "^5"}}

排查方向及解决方案 #

1. 检查服务端/客户端代码边界 #

Next.js 14 App Router严格区分服务端组件与客户端组件，若python-course/page.tsx中存在以下问题会触发构建错误：

• 直接在客户端组件中调用child_process、mongoose等Node.js专属模块；
• 需要客户端交互的组件未添加'use client'指令。

解决：

• 将服务端专属逻辑移至Route Handler或Server Component；
• 若页面需使用React Hooks，在文件顶部添加'use client'。

2. 清理冗余/冲突依赖 #

你的package.json存在几个不合理依赖：

• child_process、child-process：这是Node.js内置模块，无需手动安装，直接卸载：

  npm uninstall child_process child-process
  

• clerk与@clerk/nextjs：前者为旧版本，与官方最新集成包冲突，卸载旧版：

  npm uninstall clerk
  

• express、body-parser、raw-body：若仅为前端Next.js项目，无需后端框架，可卸载这些依赖。

3. 修复react-monaco-editor兼容性 #

react-monaco-editor@0.55.0与Next.js 14可能存在模块解析冲突：

• 升级至最新版本，或替换为@monaco-editor/react；
• 若保留原包，在next.config.js添加转译配置：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['react-monaco-editor', 'monaco-editor'],
  }
  
  module.exports = nextConfig
  

4. 验证环境变量配置 #

若页面使用环境变量：

• 客户端使用的变量必须以NEXT_PUBLIC_为前缀；
• 检查.env文件是否配置正确，可删除.env.local后重新创建。

5. 基础排查步骤 #

• 清理缓存并重装依赖：

  rm -rf node_modules package-lock.json
  npm install
  

• 先执行npm run lint修复代码语法/类型错误；
• 临时注释python-course/page.tsx部分代码，逐步定位错误逻辑。

内容的提问来源于stack exchange，提问作者076_Anirban Ghosh