我正在开发 vscode 的扩展。我尝试使用 React 作为界面。不幸的是，我无法将我的 React 根组件插入到 webview 的 HTML 中。
我尝试了几种方法，但我无法让其中任何一种为我工作。
这是我的 webview 提供程序的代码：
import * as vscode from "vscode";
import { UtilityService as Us } from "../../domain/services/util.service";
import * as React from "react";
import { createRoot } from "react-dom/client";
import { flushSync } from "react-dom";
export class SeekerSidebarViewProvider implements vscode.WebviewViewProvider {
public static readonly viewType = "seeker.sidebarView";
private _view?: vscode.WebviewView;
constructor(private readonly _extensionUri: vscode.Uri) {}
resolveWebviewView(
webviewView: vscode.WebviewView,
context: vscode.WebviewViewResolveContext<unknown>,
token: vscode.CancellationToken
): void | Thenable<void> {
this._view = webviewView;
webviewView.webview.options = { enableScripts: true };
webviewView.webview.html = this._getHtmlForWebview(webviewView.webview);
this.loadReact();
}
private _getHtmlForWebview(webview: vscode.Webview) {
const scriptUri = webview.asWebviewUri(
vscode.Uri.joinPath(
this._extensionUri,
"src\\infraestructure\\views\\collections\\collections.tsx"
)
);
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seekers</title>
</head>
<body>
${this.loadReact()}
<script/>
</body>
</html>`;
}
// <script nonce="${Us.getNonce()}" src="${scriptUri}">
private loadReact() {
const div = document.createElement("div");
div.id = "seekerSideBar";
// Render your React component instead
const root = createRoot(div);
flushSync(() => {
root.render(<h1>Hello, world </h1>);
});
return div.innerHTML;
}
}
但我收到以下错误：
document is not defined: ReferenceError: document is not defined
at SeekerSidebarViewProvider.loadReact (c:\workspace\adeso-seeker\dist\extension.js:49:21)
at SeekerSidebarViewProvider._getHtmlForWebview (c:\workspace\adeso-seeker\dist\extension.js:42:20)
at SeekerSidebarViewProvider.resolveWebviewView (c:\workspace\adeso-seeker\dist\extension.js:28:41)
at g.$resolveWebviewView (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:111:41422)
at i.N (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:116:10813)
at i.M (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:116:10579)
at i.H (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:116:9621)
at i.G (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:116:8875)
at n.value (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:116:7566)
at m.w (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1902)
at m.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2119)
at w.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:79:13940)
at n.value (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:135:7901)
at m.w (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:1902)
at m.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:63:2119)
at w.fire (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:79:13940)
at MessagePortMain.<anonymous> (c:\Program Files\Microsoft VS Code\resources\app\out\vs\workbench\api\node\extensionHostProcess.js:135:6181)
at MessagePortMain.emit (node:events:513:28)
at MessagePortMain.emit (node:domain:489:12)
at MessagePortMain._internalPort.emit (node:electron/js2c/utility_init:2:367)
at Object.topLevelDomainCallback (node:domain:161:15)
at Object.callbackTrampoline (node:internal/async_hooks:128:24)
Webview fatal error: Error: Could not register service worker: InvalidStateError: Failed to register a ServiceWorker: The document is in an invalid state.
我该怎么做才能使
documentVSC API 没有
document将
loadReact()_getHtmlForWebview()让它在浏览器中作为独立的 HTML 页面工作，并使用它从
_getHtmlForWebview()