升级Next.js至最新版本后出现ERR_PACKAGE_PATH_NOT_EXPORTED错误

错误详情 #

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './cjs/react.development' is not defined by "exports" in /home/oem/Desktop/cld-frontend/cld-frontend/node_modules/react/package.json
    at new NodeError (node:internal/errors:371:5)
    at throwExportsNotFound (node:internal/modules/esm/resolve:453:9)
    at packageExportsResolve (node:internal/modules/esm/resolve:729:3)
    at resolveExports (node:internal/modules/cjs/loader:482:36)
    at Function.Module._findPath (node:internal/modules/cjs/loader:522:31)
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:919:27)
    at Function.mod._resolveFilename (/home/oem/Desktop/cld-frontend/cld-frontend/node_modules/next/dist/build/webpack/require-hook.js:23:32)
    at Function.Module._load (node:internal/modules/cjs/loader:778:27)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED',
  page: '/colleges/[collegeUriSlug]'
}

依赖配置对比 #

旧依赖（Next.js 12.1.0） #

{  
  "name": "cld-frontend",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": {    
    "dev": "next dev",    
    "build": "next build",    
    "start": "next start",    
    "lint": "next lint"  
  },  
  "dependencies": {    
    "classnames": "^2.3.1",    
    "dayjs": "^1.11.5",    
    "i": "^0.3.7",    
    "mongodb": "^4.10.0",    
    "next": "^12.1.0",    
    "npm": "^8.12.2",    
    "react": "17.0.2",     
    "react-device-detect": "^2.2.2",    
    "react-dom": "17.0.2",    
    "react-horizontal-scrolling-menu": "^2.7.1",     
    "react-multi-carousel": "^2.8.0",    
    "react-select": "^5.4.0",    
    "sharp": "^0.30.5"   
  },  
  "devDependencies": {    
    "@svgr/webpack": "^6.2.1",    
    "eslint": "8.9.0",    
    "eslint-config-next": "12.1.0"  
  }
}

新依赖（Next.js 13.0.5） #

{  
  "name": "cld-frontend",  
  "version": "0.1.0",  
  "private": true,  
  "scripts": {    
    "dev": "next dev",    
    "build": "next build",    
    "start": "next start",    
    "lint": "next lint"  
  },  
  "dependencies": {    
    "classnames": "^2.3.1",    
    "dayjs": "^1.11.5",    
    "i": "^0.3.7",    
    "mongodb": "^4.10.0",    
    "next": "^13.0.5",    
    "npm": "^8.12.2",    
    "react": "18.2.0",    
    "react-device-detect": "^2.2.2",    
    "react-dom": "18.2.0",    
    "react-horizontal-scrolling-menu": "^2.7.1",    
    "react-multi-carousel": "^2.8.0",    
    "react-select": "^5.4.0",    
    "sharp": "^0.30.5"  
  },  
  "devDependencies": {    
    "@svgr/webpack": "^6.2.1",    
    "eslint": "8.9.0",    
    "eslint-config-next": "13.0.5"  
  }
}

已尝试的无效解决方案 #

• yarn upgrade
• 删除node_modules和package.lock.json后重新安装依赖
• npm update 及 npm audit fix --force

可行解决方案 #

1. 升级第三方适配依赖 #

部分第三方库（如react-horizontal-scrolling-menu、react-multi-carousel）可能未适配React 18的导出结构，执行命令升级这些依赖到最新版本：

npm update react-horizontal-scrolling-menu react-multi-carousel react-device-detect

2. 配置Webpack别名（临时修复） #

在项目根目录的next.config.js中添加Webpack别名，强制指向正确的React入口：

const path = require('path');

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['react'] = path.resolve(__dirname, './node_modules/react');
    return config;
  },
};

module.exports = nextConfig;

修改完成后重启开发服务器。

3. 降级React版本适配 #

如果第三方库暂时无法升级，可将React降级回17.x版本（Next.js 13兼容React 17），修改package.json中的依赖：

"react": "17.0.2",
"react-dom": "17.0.2"

然后重新安装依赖：

npm install

4. 清除Next.js缓存 #

Next.js的缓存可能残留旧模块引用，执行以下命令清除缓存后重启服务：

rm -rf .next/
npm run dev

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