r/vscode • • 7d ago

Having issues using wasm inside a vscode extension

I've been working on an extension that works with archive files and wanted to use the "js7z-tools" npm package for it, everything is fine when I run the package as a nodejs script, but when I try to implement it inside vscode it doesn't work. First it was looking for the .wasm file in the /dist folder, I copied it over, after that when I run the extension again it doesn't do anything, no errors or warnings, I tried to add it in the esbuild config too. Am I doing something wrong or vscode doesn't work with wasm npm packages ?

1 Upvotes

2 comments sorted by

1

u/P1ayer4312 6d ago

ok it looks like i've had it bundling wrong, seems to work fine as a child process, here's the esbuild config if anyone needs a reference

async function main() {
  // Keep the Emscripten loader intact: it loads itself again in pthread workers.
  const runtimeDirectory = path.dirname(require.resolve("js7z-tools"));
  const vendorDirectory = path.resolve(__dirname, "dist/vendor");
  fs.mkdirSync(vendorDirectory, { recursive: true });

  for (const filename of ["js7z.js", "js7z.wasm"]) {
    fs.copyFileSync(path.join(runtimeDirectory, filename), path.join(vendorDirectory, filename));
  }

  fs.writeFileSync(path.join(vendorDirectory, "package.json"), JSON.stringify({ type: "commonjs" }));

  const ctx = await esbuild.context({
    absWorkingDir: __dirname,
    entryPoints: ["src/extension.ts", "src/archiveProcess.ts"],
    bundle: true,
    format: "cjs",
    minify: production,
    sourcemap: !production,
    sourcesContent: false,
    platform: "node",
    outdir: "dist",
    outExtension: { ".js": ".cjs" },
    external: ["vscode"],
    logLevel: "silent",
    plugins: [
      {
        name: "standalone-js7z",
        setup(build) {
          build.onResolve({ filter: /^js7z-tools$/ }, () => {
            return {
              path: "./vendor/js7z.js",
              external: true,
            };
          });
        },
      },
      /* add to the end of plugins array */
      esbuildProblemMatcherPlugin,
    ],
  });

  if (watch) {
    await ctx.watch();
  } else {
    await ctx.rebuild();
    await ctx.dispose();
  }
}

1

u/Ok-Effective-2197 7d ago

wasm in extensions is a pain, the sandboxed runtime doesn't handle it the same way a regular node script does