VSCode Extension webview load json file problem

Question

I am trying to build a project where I have one json file that I have to parse in my main file. But I cannot include it in main file. In terminal there is no error both for main.ts and main.js. Webview panel is showing the content from the html but nothing from the main file. If I inspect through developer tools, it's displaying error. I am importing json in main.ts and the main.js is the compiled file for main.ts. I need both the files and the error is occurring for either of them.

I have tried different combinations

Combination 1:

import json from "./test.json"; //in main.ts file
"module": "commonjs" // in tsconfig.json file

Error is "exports is not defined at main.js file"

Combination 2:

const json = require("./test.json"); //in main.ts file
"module": "commonjs" // in tsconfig.json file

Error is "require is not defined at main.ts"

Combination 3:

const json = require("./test.json"); //in main.ts file
"module": "es2015" // in tsconfig.json file

Error is "require is not defined at main.ts"

Combination 4:

import json from "./test.json"; //in main.ts file
"module": "es2015" // in tsconfig.json file

Error is "Cannot use import statement outside a module"

And below is an example of my complete tsconfig.json

{
    "compilerOptions": {
        "module": "es2015",
        "target": "es5",
        "outDir": "out",
        "sourceMap": true,
        "strict": true,
        "rootDir": "src",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "strictNullChecks":false,
        "lib": ["dom","es2015","es5","es6"]
    },
    "exclude": ["node_modules", ".vscode-test"],
    "include"        : [
        "src/**/*"
    ]
}

What am I doing wrong? Please help. Thanks in advance.

Answer 1

The webview sandbox loads your javascript file(s), so if you load them as ESM Modules, you load your main .js file as a module, you import additional files using the import ... from ... statement (thanks to @Phrogz for pointing it out). But as you are loading data from .json file to the webview, I would recommend using the messaging solution that comes with the VS Code webview API:

Files and resources can only be loaded if they come from a configured location. See https://code.visualstudio.com/api/extension-guides/webview#loading-local-content

Concerning VS Code Webview, I would recommend keeping the logic in your extension code, keeping the Webview to only visualization logic, and communicating back and forth using the message passing described here: https://code.visualstudio.com/api/extension-guides/webview#scripts-and-message-passing and by invoking your extension commands .

That way, you can load the json file in your typescript code that creates the Webview, then upon an event (either the body onload event, or the user pressing a button), the javascript in your Webview html shall pass a message to your extension requesting the json data. Your extension passes a message back containing the json data as payload.

Example extension code:

    const json = require("./test.json");

    // Send a message to our webview.
    // You can send any JSON serializable data.
    currentPanel.webview.postMessage({ command: 'load', jsonData: json });

Example Webview javascript code:

        window.addEventListener('message', event => {

            const message = event.data; // The command and JSON data our extension sent

            switch (message.command) {
                case 'load':
                    // todo: do something with the json data
                    console.log(message.jsonData)
                    break;
            }
        });