Issue Including External JavaScript File in VSCode Extension Webview #1250

ritikramuka · 2024-06-24T08:44:40Z

ritikramuka
Jun 24, 2024

I'm developing a VSCode extension for web and I'm having trouble including an external JavaScript file from the node_modules directory in my webview. Specifically, I'm trying to include survey.lib.umd.v1.0.10.min.js from the @gia/survey-sdk package to create a survey within the webview. Despite following the standard procedure, I keep encountering a FileSystemError indicating that no file system handle is registered for the path.

Here is the code I am using:

import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.showWebview', () => {
            const panel = vscode.window.createWebviewPanel(
                'webview',
                'Survey Webview',
                vscode.ViewColumn.One,
                {
                    enableScripts: true,
                    localResourceRoots: [
                        vscode.Uri.file(path.join(context.extensionPath, 'node_modules', '@gia', 'survey-sdk', 'dist'))
                    ]
                }
            );

            const surveySdkPath = vscode.Uri.file(
                path.join(context.extensionPath, 'node_modules', '@gia', 'survey-sdk', 'dist', 'survey.lib.umd.v1.0.10.min.js')
            );
            const surveySdkUri = panel.webview.asWebviewUri(surveySdkPath);

            panel.webview.html = getWebviewContent(surveySdkUri);
        })
    );
}

function getWebviewContent(surveySdkUri: vscode.Uri): string {
    return `
        <!DOCTYPE html>
        <html lang="en">

            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <script src=${surveySDKUri}></script>
                <title>Test</title>
            </head>

            <body>
                <survey-sdk id="mySurvey"></survey-sdk>
            </body>
        </html>
    `;
}

export function deactivate() {}

Error Message:
(FileSystemError): Error: No file system handle registered (\node_modules)

Could someone please help me identify what I'm doing wrong or provide guidance on the correct way to include external JavaScript files from node_modules in a VSCode webview? Any insights or examples would be greatly appreciated.

isidorn · 2024-06-24T08:57:30Z

isidorn
Jun 24, 2024
Maintainer

Here's what GH Copilot says. And it looks like a reasonable answer to me.

To resolve the issue of including an external JavaScript file from the node_modules directory in your VSCode extension’s webview, you need to ensure that the path and URI conversions are handled correctly. The error FileSystemError: No file system handle registered typically occurs because the webview cannot access the specified file path due to incorrect path handling or missing permissions.

Here’s a detailed and corrected approach:

1.	Ensure localResourceRoots is properly set to the directory containing your JS file.
2.	Correctly handle the conversion of the file path to a webview URI.
3.	Ensure paths are correctly formed, considering the environment (Windows vs. Unix-like).

Here’s the updated code:

import * as vscode from 'vscode';
import * as path from 'path';

export function activate(context: vscode.ExtensionContext) {
    context.subscriptions.push(
        vscode.commands.registerCommand('extension.showWebview', () => {
            const panel = vscode.window.createWebviewPanel(
                'webview',
                'Survey Webview',
                vscode.ViewColumn.One,
                {
                    enableScripts: true,
                    // Specify the directory containing your JS file
                    localResourceRoots: [
                        vscode.Uri.file(path.join(context.extensionPath, 'node_modules', '@gia', 'survey-sdk', 'dist'))
                    ]
                }
            );

            // Construct the path to the JS file
            const surveySdkPath = vscode.Uri.file(
                path.join(context.extensionPath, 'node_modules', '@gia', 'survey-sdk', 'dist', 'survey.lib.umd.v1.0.10.min.js')
            );

            // Convert the file path to a webview URI
            const surveySdkUri = panel.webview.asWebviewUri(surveySdkPath);

            // Generate the webview content with the correct URI
            panel.webview.html = getWebviewContent(surveySdkUri);
        })
    );
}

function getWebviewContent(surveySdkUri: vscode.Uri): string {
    return `
        <!DOCTYPE html>
        <html lang="en">
            <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <script src="${surveySdkUri}"></script>
                <title>Survey Webview</title>
            </head>
            <body>
                <survey-sdk id="mySurvey"></survey-sdk>
            </body>
        </html>
    `;
}

export function deactivate() {}

Key Points to Ensure:

1.	localResourceRoots:
•	This should be set to the directory containing the JS file. It allows the webview to load local resources from the specified directories.
2.	Path and URI Handling:
•	Ensure paths are correctly formed using path.join.
•	Convert the file path to a webview URI using panel.webview.asWebviewUri.
3.	Quotes in HTML:
•	Use double quotes around the src attribute in the HTML template to ensure the URI is correctly interpreted.

By ensuring the above points, the VSCode webview should be able to correctly load the external JavaScript file from the node_modules directory.

3 replies

ritikramuka Jun 24, 2024
Author

node_modules are not available on web, so it can't resolve path like this

isidorn Jun 24, 2024
Maintainer

Are you developing your extension to work on vscode.dev (for the web). You did not mention that. As a regular vscode extension, you should have access to node modules

ritikramuka Jun 24, 2024
Author

Yes currently I'm working for vscode.dev

theReynald · 2024-07-08T07:18:45Z

theReynald
Jul 8, 2024
Maintainer

Closing due to inactivity. Please reopen if more discussion is needed.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue Including External JavaScript File in VSCode Extension Webview #1250

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 2 comments 3 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Issue Including External JavaScript File in VSCode Extension Webview #1250

ritikramuka Jun 24, 2024

Replies: 2 comments · 3 replies

isidorn Jun 24, 2024 Maintainer

ritikramuka Jun 24, 2024 Author

isidorn Jun 24, 2024 Maintainer

ritikramuka Jun 24, 2024 Author

theReynald Jul 8, 2024 Maintainer

ritikramuka
Jun 24, 2024

Replies: 2 comments 3 replies

isidorn
Jun 24, 2024
Maintainer

ritikramuka Jun 24, 2024
Author

isidorn Jun 24, 2024
Maintainer

ritikramuka Jun 24, 2024
Author

theReynald
Jul 8, 2024
Maintainer