【问题标题】:The 'compilation' argument must be an instance of Compilation error in office add-in“编译”参数必须是 Office 加载项中编译错误的实例
【发布时间】:2021-12-19 09:52:43
【问题描述】:

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

c:\git\sample-project\ui-addin>npm run dev-server

> ui-addin@1.0.0 dev-server c:\git\sample-project\ui-addin
> webpack-dev-server --mode development

You already have trusted access to https://localhost.
Certificate: C:\Users\Manish.Kumar\.office-addin-dev-certs\localhost.crt
Key: C:\Users\Manish.Kumar\.office-addin-dev-certs\localhost.key
i 「wds」: Project is running at https://127.0.0.1:3000/
i 「wds」: webpack output is served from /
i 「wds」: Content not from webpack is served from c:\git\sample-project\ui-addin
(node:19272) UnhandledPromiseRejectionWarning: TypeError: The 'compilation' argument must be an instance of Compilation
at Function.getCompilationHooks (c:\git\sample-project\ui-addin\node_modules\custom-functions-metadata-plugin\node_modules\webpack\lib\NormalModule.js:207:10)
at c:\git\sample-project\ui-addin\node_modules\custom-functions-metadata-plugin\lib\customfunctionsplugin.js:41:36
at 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)
at SyncHook.lazyCompileHook (c:\git\sample-project\ui-addin\node_modules\webpack\node_modules\tapable\lib\Hook.js:154:20)
at Compiler.newCompilation (c:\git\sample-project\ui-addin\node_modules\webpack\lib\Compiler.js:631:26)
at c:\git\sample-project\ui-addin\node_modules\webpack\lib\Compiler.js:667:29
at eval (eval at create (c:\git\sample-project\ui-addin\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:1)
at processTicksAndRejections (internal/process/task_queues.js:95:5)
(Use `node --trace-warnings ...` to show where the warning was created)
(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)
(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.

我验证了使用“npm ls webpack”安装的 webpack 版本并使其相同。但还没有运气。同样的应用程序正在另一个用户的机器上运行文件,他能够运行加载项,但我不知道为什么会出现此错误。

我的 package.json 文件:

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

}

【问题讨论】:

    标签: webpack webpack-dev-server office-addins webpack-4


    【解决方案1】:

    问题在于 Windows、Powershell 以及如何处理区分大小写的问题。我知道您使用了 Powershell,因为如果您只是打开命令提示符,则不存在此问题。 (这可能部分解释了为什么它可以在您同事的工作站上运行。)

    TLDR;使用命令提示符或找到目录的确切大小写(例如使用资源管理器)并在 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>
    

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

    【讨论】:

    • 谢谢!但是我在命令提示符下也遇到了同样的问题,我的同事正在使用 PowerShell,他可以毫无问题地运行它。所以我认为这与 PowerShell 或命令提示符无关。正如你提到的,我也验证了文件夹的命名大小写,但它们是相同的,所以这与大小写无关。
    • 哇,这真是令人惊讶。我可以使用上面概述的步骤始终如一地重现相同的错误。事实上,我刚刚在进行开发并尝试在 Powershell 中使用错误的情况下 npm run build 时不小心对自己做了这件事。祝你好运!
    猜你喜欢
    • 2021-09-09
    • 1970-01-01
    • 2018-11-13
    • 2021-06-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多