VS Code中Node.js调试SAP UI5项目报错：sap未定义

环境信息 #

• VS Code版本: 1.86.2 (user setup)
• Electron: 27.2.3
• Chromium: 118.0.5993.159
• Node.js: 18.17.1
• V8: 11.8.172.18-electron.0
• 操作系统: Windows_NT x64 10.0.22631

问题描述 #

尝试用VS Code的Node.js调试器调试SAP UI5项目时，调试无法启动，报错如下：

Debugger attached.
Waiting for the debugger to disconnect...
C:\Users...\VS Projects\Hello World\webapp\controller\HelloPanel.controller.js:1
sap.ui.define([
^

ReferenceError: sap is not defined
    at Object.<anonymous> (C:\Users\...\VS Projects\Hello World\webapp\controller\HelloPanel.controller.js:1:1)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49

相关配置 #

.vscode/launch.json #

"version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
            "console": "integratedTerminal",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "trace": true,
            "program": "${workspaceFolder}\\webapp\\controller\\MainView.controller.js"
        }
    ]

index.html #

id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-libs="sap.m"
data-sap-ui-resourceroots='{
    ...
}'
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted"

ui5.yaml & manifest.json #

ui5.yaml

framework:
        name: OpenUI5
        version: 1.108.0
        libraries:
          - name: sap.ui.core
          - name: sap.m
          - name: sap.ui.layout
          - name: themelib_sap_horizon

manifest.json

"sap.ui": {
    "technology": "UI5",
...

  "sap.ui5": {
    "flexEnabled": true,
    "dependencies": {
      "minUI5Version": "1.102.0",
      "libs": {
        "sap.m": {},
        "sap.ui.core": {}
      }
    },

问题原因 #

你错误地使用Node.js调试器直接执行SAP UI5的控制器文件，这违反了UI5框架的运行逻辑：

1. SAP UI5是浏览器端前端框架，全局sap对象只能在浏览器环境中通过index.html引入的sap-ui-core.js脚本初始化
2. Node.js是服务器端运行环境，直接执行控制器文件时，没有加载任何UI5资源，自然不存在sap全局对象，因此抛出ReferenceError
3. 你的launch.json中program字段直接指向控制器文件，相当于让Node.js单独运行这个前端模块，完全脱离了UI5的运行上下文

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