Node.js 10升级至22时项目编译错误的解决方法咨询

问题概述 #

将项目Node.js版本从10升级到22后，执行npm run build触发编译错误，核心报错提示为Non-string value passed to ts.resolveTypeReferenceDirective，项目在Node.js 10环境下可正常编译。

错误日志 #

PS D:\temp checkouts\Plugin\ep\Client\Source\src> npm run build

> Popeye-for-otw@3.0.0 build
> webpack -p --mode production --https false

Hash: 2d12da5aa2b9e3d8a7f0
Version: webpack 4.47.0
Time: 17943ms
Built at: 26/11/2024 4:58:35 pm
 29 assets
Entrypoint static/js/taskpane/taskpane = static/js/taskpane/taskpane.edc24e6c2c548678763b.js
Entrypoint static/js/fallback/fallback = static/js/fallback/fallback.43653455be015cd2faab.js
Entrypoint static/js/onsend/onsend = static/js/onsend/onsend.b5845d8d591b6170e9aa.js
Entrypoint static/js/displaydialog/errordialogboxv1 = static/js/displaydialog/errordialogboxv1.be8e20592f7cb610a62e.js
[0] ./src/taskpane/taskpane.ts 718 bytes {3} [built] [failed] [1 error]
[1] ./src/taskpane/fallbackauth/fallbackauth.ts 718 bytes {1} [built] [failed] [1 error]
[2] ./src/onsend/onsend.ts 718 bytes {2} [built] [failed] [1 error]
[3] ./src/utils/uiutils/displaydialog/displaydialog.ts 3.95 KiB {0} [built] [failed] [1 error]

ERROR in ./src/utils/uiutils/displaydialog/displaydialog.ts
Module build failed (from ./node_modules/ts-loader/index.js):
Error: Debug Failure. False expression: Non-string value passed to `ts.resolveTypeReferenceDirective`, likely by a wrapping package working with an outdated `resolveTypeReferenceDirectives` signature. This is probably not a problem in TS itself.
    at Object.resolveTypeReferenceDirective (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:43500:18)
    at D:\temp checkouts\Plugin\ep\Client\Source\node_modules\ts-loader\dist\servicesHost.js:373:77
    at D:\temp checkouts\Plugin\ep\Client\Source\node_modules\ts-loader\dist\servicesHost.js:95:142
    at Array.map (<anonymous>)
    at Object.resolveTypeReferenceDirectives (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\ts-loader\dist\servicesHost.js:95:125)
    at actualResolveTypeReferenceDirectiveNamesWorker (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:119382:163)
    at resolveTypeReferenceDirectiveNamesWorker (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:119682:26)
    at processTypeReferenceDirectives (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:121185:31)
    at findSourceFileWorker (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:121070:21)
    at findSourceFile (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:120922:26)
    at processImportedModules (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:121331:25)
    at findSourceFileWorker (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:121076:17)
    at findSourceFile (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:120922:26)
    at D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:120871:85
    at getSourceFileFromReferenceWorker (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:120837:34)
    at processSourceFile (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:120871:13)
    at processRootFile (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:120672:13)
    at D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:119473:67
    at Object.forEach (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:181:30)
    at Object.createProgram (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:119473:16)
    at synchronizeHostData (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:169335:26)
    at Object.getProgram (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\typescript\lib\typescript.js:169449:13)
    at successfulTypeScriptInstance (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\ts-loader\dist\instances.js:178:80)
    at Object.getTypeScriptInstance (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\ts-loader\dist\instances.js:34:12)
    at Object.loader (D:\temp checkouts\Plugin\ep\Client\Source\node_modules\ts-loader\dist\index.js:17:41)

tsconfig.json配置 #

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "outDir": "dist",
    "allowUnusedLabels": true,
    "noImplicitReturns": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "resolveJsonModule": true,
    "lib": ["es7", "dom"],
    "pretty": true,
    "typeRoots": ["node_modules/@types"]
  },
  "exclude": ["node_modules"],
  "compileOnSave": false,
  "buildOnSave": false
}

项目devDependencies #

"devDependencies": {
    "@babel/core": "^7.11.6",
    "@babel/polyfill": "^7.11.5",
    "@babel/preset-env": "^7.11.5",
    "@types/crypto-js": "^4.0.1",
    "@types/debug": "^4.1.5",
    "@types/find-process": "1.2.0",
    "@types/office-js": "^1.0.394",
    "@types/office-runtime": "^1.0.35",
    "@types/react": "^18.3.1",
    "@types/react-dom": "^18.3.1",
    "@types/webpack": "^4.4.34",
    "@types/webpack-dev-server": "^3.1.6",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.1.1",
    "css-loader": "^3.0.0",
    "eslint-config-office-addins": "^1.0.19",
    "eslint-plugin-office-addins": "^0.1.1",
    "eslint-plugin-react": "^7.16.0",
    "extract-text-webpack-plugin": "4.0.0-beta.0",
    "file-loader": "^4.2.0",
    "find-process": "^1.4.3",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^4.5.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "office-addin-cli": "^1.0.13",
    "office-addin-debugging": "^5.0.5",
    "office-addin-dev-certs": "^1.5.5",
    "office-addin-lint": "^1.0.26",
    "office-addin-manifest": "^1.6.2",
    "office-addin-prettier-config": "^1.0.12",
    "postcss-loader": "3.0.0",
    "source-map-loader": "^0.2.4",
    "style-loader": "^0.23.1",
    "ts-loader": "^6.2.2",
    "typescript": "^4.0.3",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },

已尝试的解决方案 #

• 升级ts-loader、typescript和webpack至最新版本
• 注释整个displaydialog.ts文件

以上操作均未解决编译错误。

推荐修复步骤 #

1. 升级核心构建工具到兼容Node.js 22的版本 #

Webpack 4与Node.js 16+兼容性有限，建议直接升级到Webpack 5，同时配套更新相关依赖：

# 卸载旧版本
npm uninstall webpack webpack-cli webpack-dev-server ts-loader typescript

# 安装最新稳定版
npm install webpack webpack-cli webpack-dev-server ts-loader typescript --save-dev

2. 更新过时的loader和插件 #

• 替换废弃插件：extract-text-webpack-plugin已废弃，改用mini-css-extract-plugin：

npm uninstall extract-text-webpack-plugin
npm install mini-css-extract-plugin --save-dev

同时修改webpack配置，替换插件引用逻辑。

• 升级其他依赖：更新babel、css处理相关loader到兼容Webpack 5的版本：

npm install @babel/core @babel/preset-env babel-loader css-loader less-loader --save-dev

3. 调整tsconfig.json配置 #

适配新版本TypeScript和Node.js 22的特性：

{
  "compilerOptions": {
    "target": "es2020", // Node.js 22支持ES2022+，可根据需求调整
    "module": "esnext", // 配合Webpack 5优化打包
    "jsx": "react",
    "moduleResolution": "node",
    "sourceMap": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "outDir": "dist",
    "allowUnusedLabels": true,
    "noImplicitReturns": true,
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "resolveJsonModule": true,
    "lib": ["es2020", "dom"],
    "typeRoots": ["node_modules/@types"],
    "skipLibCheck": true, // 跳过类型库检查，减少编译冲突
    "esModuleInterop": true // 兼容CommonJS和ES模块
  },
  "exclude": ["node_modules"],
  "compileOnSave": false,
  "buildOnSave": false
}

4. 清理缓存并重新安装依赖 #

# Windows系统
rd /s /q node_modules && del package-lock.json && npm install

# macOS/Linux系统
rm -rf node_modules package-lock.json && npm install

5. 检查并适配Webpack 5配置 #

Webpack 5内置了asset模块，可替代file-loader等旧loader；同时移除Webpack 4的过时配置项，确保所有插件和loader都适配Webpack 5的API。

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