“compilation”参数必须是 Office 加载项中编译错误的实例

Question

我是 Office 插件开发的新手，但在我们的组织中有一个项目。安装 package.json 文件中提到的所有依赖项后，当我尝试运行“npm run dev-server”时，出现以下错误：

\n

c:\\git\\sample-project\\ui-addin>npm run dev-server\n\n> ui-addin@1.0.0 dev-server c:\\git\\sample-project\\ui-addin\n> webpack-dev-server --mode development\n\nYou already have trusted access to https://localhost.\nCertificate: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.crt\nKey: C:\\Users\\Manish.Kumar\\.office-addin-dev-certs\\localhost.key\ni \xef\xbd\xa2wds\xef\xbd\xa3: Project is running at https://127.0.0.1:3000/\ni \xef\xbd\xa2wds\xef\xbd\xa3: webpack output is served from /\ni \xef\xbd\xa2wds\xef\xbd\xa3: Content not from webpack is served from c:\\git\\sample-project\\ui-addin\n(node:19272) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation\nat Function.getCompilationHooks (c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\node_modules\\webpack\\lib\\NormalModule.js:207:10)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\custom-functions-metadata-plugin\\lib\\customfunctionsplugin.js:41:36\nat SyncHook.eval [as call] (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:19:10), <anonymous>:7:1)\nat SyncHook.lazyCompileHook (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\Hook.js:154:20)\nat Compiler.newCompilation (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:631:26)\nat c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\lib\\Compiler.js:667:29\nat eval (eval at create (c:\\git\\sample-project\\ui-addin\\node_modules\\webpack\\node_modules\\tapable\\lib\\HookCodeFactory.js:33:10), <anonymous>:14:1)\nat processTicksAndRejections (internal/process/task_queues.js:95:5)\n(Use `node --trace-warnings ...` to show where the warning was created)\n(node:19272) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)\n(node:19272) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.\n

\n

我验证了使用“npm ls webpack”安装的 webpack 版本并使其相同。但还没有运气。这个相同的应用程序是另一个用户计算机上的工作文件，他能够运行该加载项，但我不知道为什么会收到此错误。

\n

我的 package.json 文件：

\n

{\n"name": "ui-addin",\n"version": "1.0.0",\n"license": "MIT",\n"config": {\n    "app-to-debug": "excel",\n    "app-type-to-debug": "desktop",\n    "dev-server-port": 3000,\n    "source-bundle-url-path": "index.win32"\n},\n"scripts": {\n    "build": "webpack -p --mode production --https false",\n    "build:dev": "webpack --mode development --https false",\n    "dev-server": "webpack-dev-server --mode development",\n    "lint": "office-addin-lint check",\n    "lint:fix": "office-addin-lint fix",\n    "prettier": "office-addin-lint prettier",\n    "start": "office-addin-debugging start manifest-local.xml",\n    "start:desktop": "office-addin-dev-settings webview manifest-local-sr.xml edge && office-addin-debugging start manifest-local-sr.xml desktop",\n    "start:desktop-ie-webview": "office-addin-dev-settings webview manifest-local.xml edge && office-addin-debugging start manifest-local.xml desktop",\n    "start:no-shared-runtime:desktop": "office-addin-debugging start manifest-local.xml desktop",\n    "start:ci:desktop": "office-addin-debugging start manifest-ci.xml desktop",\n    "sideload-local": "office-toolbox sideload -m manifest-local.xml -a Excel",\n    "start:web": "office-addin-debugging start manifest-local.xml web",\n    "stop": "office-addin-debugging stop manifest-local.xml",\n    "stop:ci": "office-addin-debugging stop manifest-ci.xml",\n    "validate": "office-addin-manifest validate manifest-local-sr.xml",\n    "watch": "webpack --mode development --watch",\n    "test": "mocha -r ts-node/register test/*.ts",\n    "clear-all-cached-plugin": "rimraf \\"%LOCALAPPDATA%\\\\Microsoft\\\\Office\\\\16.0\\\\Wef\\""\n},\n"dependencies": {\n    "@types/jquery": "~3.5.0"\n},\n"devDependencies": {\n    "@babel/core": "~7.10.3",\n    "@babel/polyfill": "~7.10.1",\n    "@babel/preset-env": "~7.10.3",\n    "@openapitools/openapi-generator-cli-ihsmarkit": "~4.3.4",\n    "@types/custom-functions-runtime": "~1.5.1",\n    "@types/find-process": "~1.2.0",\n    "@types/mocha": "~7.0.2",\n    "@types/node": "~14.0.14",\n    "@types/office-js": "~1.0.111",\n    "@types/office-runtime": "~1.0.14",\n    "babel-loader": "~8.0.6",\n    "clean-webpack-plugin": "~3.0.0",\n    "copy-webpack-plugin": "~5.1.1",\n    "custom-functions-metadata-plugin": "~1.0.30",\n    "eslint-config-office-addins": "~1.0.15",\n    "file-loader": "~4.2.0",\n    "html-loader": "~0.5.5",\n    "html-webpack-plugin": "~3.2.0",\n    "merge-jsons-webpack-plugin": "~1.0.21",\n    "mocha": "~8.0.1",\n    "office-addin-cli": "~1.0.10",\n    "office-addin-debugging": "~3.0.31",\n    "office-addin-dev-certs": "~1.5.2",\n    "office-addin-dev-settings": "~1.8.3",\n    "office-addin-lint": "~1.0.23",\n    "office-addin-manifest": "~1.5.4",\n    "office-addin-prettier-config": "~1.0.12",\n    "office-addin-test-helpers": "~1.0.20",\n    "office-addin-test-server": "~1.0.27",\n    "prettier": "~1.19.1",\n    "rimraf": "~3.0.2",\n    "source-map-loader": "~0.2.4",\n    "ts-loader": "~6.1.0",\n    "ts-node": "~8.10.2",\n    "typescript": "~3.9.5",\n    "webpack": "~4.43.0",\n    "webpack-cli": "~3.3.12",\n    "webpack-dev-server": "~3.11.0"\n},\n"prettier": "office-addin-prettier-config"\n

\n

}

\n

Answer 1

这个问题是 Windows、Powershell 以及区分大小写的处理方式的一个怪癖。我知道您使用了 Powershell，因为如果您只是打开命令提示符，则不存在此问题。（这可以部分解释为什么它可以在您同事的工作站上运行。）

太长了；使用命令提示符或查找目录的确切大小写（例如使用资源管理器）并在 Powershell 中使用该大小写。

您上面显示的路径是： c:\git\sample-project\ui-addin。

作为演示，我将在命令提示符中在本地创建与您相同的目录：

C:\>mkdir git\sample-project\ui-addin
C:\>cd git\sample-project\ui-addin
C:\git\sample-project\ui-addin>

让我们进入 Powershell 中的同一目录：

PS C:\> cd Git\Sample-Project\Ui-ADDIN\
PS C:\Git\Sample-Project\Ui-ADDIN>

啊？Powershell 确实会尊重我使用的任何情况，但也会维护它！我没有深入研究这个问题，无法真正理解幕后发生的事情，但无论它是什么，都足以让 npm 和 Webpack 出现问题。

无论如何，命令 shell 不会考虑除原始情况之外的任何情况：

C:\>cd Git\Sample-PROJECT\UI-addin\
C:\git\sample-project\ui-addin>

虽然许多资源帮助我解决了这个问题，但这个 Github 问题帮助我理解并解决了它。