🐛 fix(settings-webview): resolve webview loading and routing issues

bramburn · bramburn · commit 503e81deec8c · 2025-04-12T00:29:41.000+01:00
- correct vscode api initialization for webview context
- switch to MemoryRouter to fix routing issues within the webview
- ensure image base URI is correctly passed to the webview
diff --git a/settings-webview/src/App.tsx b/settings-webview/src/App.tsx
@@ -1,33 +1,26 @@
 import { useState, useEffect } from "react"
-import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
+import { MemoryRouter as Router, Routes, Route } from "react-router-dom"
 import { FluentProvider, webLightTheme, webDarkTheme } from "@fluentui/react-components"
 import SettingsView from "./components/SettingsView"
 import "./App.css"
 
 // Define the VS Code API
 declare global {
 	interface Window {
-		acquireVsCodeApi?: () => {
-			postMessage: (message: any) => void
-			getState: () => any
-			setState: (state: any) => void
+		vscode?: {
+			postMessage: (message: unknown) => void
+			getState: () => unknown
+			setState: (state: unknown) => void
 		}
 	}
 }
 
-// Initialize VS Code API
-const vscode = (() => {
-	if (window.acquireVsCodeApi) {
-		return window.acquireVsCodeApi()
-	}
-
-	// Fallback for when running outside of VS Code (e.g., in a browser for development)
-	return {
-		postMessage: (message: any) => console.log("VS Code message:", message),
-		getState: () => ({}),
-		setState: () => {},
-	}
-})()
+// Use the global vscode object that was set in the HTML
+const vscode = window.vscode || {
+	postMessage: (message: unknown) => console.log("VS Code message:", message),
+	getState: () => ({}),
+	setState: () => {},
+}
 
 // Define the message type for communication with the extension
 interface VSCodeMessage {
@@ -73,7 +66,7 @@ function App() {
 
 	return (
 		<FluentProvider theme={theme}>
-			<Router>
+			<Router initialEntries={["/"]} initialIndex={0}>
 				<div className="app-container">
 					{!initialized ? (
 						<div style={{ padding: "20px" }}>Loading settings...</div>
diff --git a/src/core/webview/SettingsWebviewProvider.ts b/src/core/webview/SettingsWebviewProvider.ts
@@ -162,13 +162,15 @@ export class SettingsWebviewProvider {
 
 		// Get URIs for resources
 		const scriptUri = getUri(webview, this.context.extensionUri, ["settings-webview", "dist", "assets", "index.js"])
+		this.log(`scriptUri: ${scriptUri}`)
 
 		const stylesUri = getUri(webview, this.context.extensionUri, [
 			"settings-webview",
 			"dist",
 			"assets",
 			"index.css",
 		])
+		this.log(`stylesUri: ${stylesUri}`)
 
 		// Get codicons URI
 		const codiconsUri = getUri(webview, this.context.extensionUri, [
@@ -178,9 +180,11 @@ export class SettingsWebviewProvider {
 			"dist",
 			"codicon.css",
 		])
+		this.log(`codiconsUri: ${codiconsUri}`)
 
 		// Get images URI
 		const imagesUri = getUri(webview, this.context.extensionUri, ["assets", "images"])
+		this.log(`imagesUri: ${imagesUri}`)
 
 		return /*html*/ `
         <!DOCTYPE html>
@@ -193,7 +197,9 @@ export class SettingsWebviewProvider {
             <link rel="stylesheet" type="text/css" href="${stylesUri}">
 			<link href="${codiconsUri}" rel="stylesheet" />
 			<script nonce="${nonce}">
-				window.IMAGES_BASE_URI = "${imagesUri}"
+				window.IMAGES_BASE_URI = "${imagesUri}";
+				// Make sure vscode is defined for the webview
+				window.vscode = acquireVsCodeApi();
 			</script>
             <title>Roo Code Settings</title>
           </head>
