React项目执行npm start报错ERR_PACKAGE_PATH_NOT_EXPORTED的解决方法

问题重现 #

克隆React项目并安装依赖后执行npm start，出现如下错误：

$ npm start
zentsify@0.1.0 start
react-scripts start

node:internal/modules/cjs/loader:544
throw e;
^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is not defined by "exports" in C:\Users\emman\Desktop\zenstify\zenstify2\node_modules\postcss-safe-parser\node_modules\postcss\package.json
    at new NodeError (node:internal/errors:400:5)
    at exportsNotFound (node:internal/modules/esm/resolve:361:10)
    at packageExportsResolve (node:internal/modules/esm/resolve:697:9)
    at resolveExports (node:internal/modules/cjs/loader:538:36)
    at Module._findPath (node:internal/modules/cjs/loader:607:31)
    at Module._resolveFilename (node:internal/modules/cjs/loader:1025:27)
    at Module._load (node:internal/modules/cjs/loader:885:27)
    at Module.require (node:internal/modules/cjs/loader:1105:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (C:\Users\emman\Desktop\zenstify\zenstify2\node_modules\postcss-safe-parser\lib\safe-parser.js:1:17) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}

Node.js v18.13.0

已尝试卸载并重新安装postcss，问题未解决。

问题原因 #

该错误是postcss-safe-parser版本与依赖的postcss版本不兼容导致的。高版本PostCSS（v8+）调整了包的导出结构，不再对外暴露./lib/tokenize路径，但旧版postcss-safe-parser仍在尝试引用该路径。

解决方案 #

方案1：升级postcss-safe-parser到适配版本 #

执行命令安装最新版postcss-safe-parser：

npm install postcss-safe-parser@latest --save-dev

安装完成后重新执行npm start。

方案2：强制指定兼容的postcss版本 #

如果升级postcss-safe-parser无效，可以在package.json中添加overrides字段（npm 8+支持），强制项目使用与postcss-safe-parser兼容的postcss版本：

"overrides": {
  "postcss-safe-parser": {
    "postcss": "^7.0.39"
  }
}

添加后删除node_modules和package-lock.json，重新执行：

rm -rf node_modules package-lock.json
npm install
npm start

方案3：清除缓存并重新安装依赖 #

缓存可能导致依赖版本异常，执行以下命令：

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

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