Document localResourceRoot for Webview codicons.css net::ERR_ABORTED 401
Author: rolandostarCreated Sep 30, 2022Updated Jan 5, 2026
Labelsbug
When following the webview-codicons-sample I found the following error was returned on the extension host console:
GET https://file+.vscode-resource.vscode-cdn.net/ [...] /node_modules/%40vscode/codicons/dist/codicon.css net::ERR_ABORTED 401This was caused due to Serialization and WebView Options:
if (vscode.window.registerWebviewPanelSerializer) {
// Make sure we register a serializer in activation event
vscode.window.registerWebviewPanelSerializer(TTSConsolePanel.viewType, {
async deserializeWebviewPanel(webviewPanel: vscode.WebviewPanel, state: unknown) {
console.log(`Got state: ${state}`);
// Reset the webview options so we use latest uri for `localResourceRoots`.
webviewPanel.webview.options = getWebviewOptions(context.extensionUri);
TTSConsolePanel.revive(webviewPanel, context.extensionUri);
},
});
}According to the localResourceRoot docs, this option should by default allow resources within extension's install directory, but I've found this is only true if localResourceRoots is not set. If there's any values passed, then the extension's install directory must also be explicitly allowed like so:
export function getWebviewOptions(extensionUri: vscode.Uri): vscode.WebviewOptions {
return {
enableScripts: true,
localResourceRoots: [
vscode.Uri.joinPath(extensionUri, 'node_modules', '@vscode/codicons', 'dist'), // <-- This was missing
vscode.Uri.joinPath(extensionUri, 'assets'),
],
};
}This behavior was difficult to trace down and I believe it should be either included on the example or mentioned in the README.
Source: microsoft/vscode-extension-samples