Is there a guide to getting it run with Vite using SvelteKit

[pyenthu]

May I request any basic pointers to get this running with Vite.
It is asking for some dependencies that seem to be missing? Or I need to setup separately.
Apologize for this very basic, enquiry.

node_modules/.vite/deps". The package may have incorrect main/module/exports specified in its package.json.

[pyenthu]

Failed to resolve entry for package "/Users/XXXXXXXXXX/node_modules/.vite/deps". The package may have incorrect main/module/exports specified in its package.json.

I just tried to import from "manifold-3d"
Using Sveltekit

[pyenthu]

Just an update I got it working by copying the ts declarations, manifold.wasm and the manifold.js file into a lib directory under sveltekit and importing them from there, not directly under the node_modules.
So I just bypassed the "standard" vite npm/node_modules import and it worked.
I think vite is expecting some kind of config in its dependencies for importing under node. I am maybe not as skilled in setting up this but atleast I have got this going. it took me a while to get it done but atleast I am in.
Thank you for your prompt response.

[elalish]

Well, I've never used Sveltekit, but we use Vite internally for ManifoldCAD.org: https://github.com/elalish/manifold/blob/master/bindings/wasm/examples/vite.config.js

manifold-3d doesn't have any dependencies, so I'm guessing that error is coming from further up in your stack.

[pyenthu]

Is it possibe to find out all the import functions for this WASM file? That way it could be instantiated via a fetch.

[elalish]

I've had some trouble with this as well - I think WASM support in Vite is not completely stable yet, and last I checked some extensions were needed. I'd ask on their forums and see if your feedback helps them improve. If they come back with packaging things we could do to make it easier on our side, I'd be happy to, but I believe we're already following best practices for making a WASM library that works on both Node and browser.

Not sure what you mean by imports - the only thing in our WASM is a Module - once instantiated, the whole API is under that.

[pyenthu]

In Dev mode this will work like a charm. As I said I placed the files next to my code. Not improting from node directory but locally.

import Module from "$lib/manifold/built/manifold";
const wasm = await Module();
wasm.setup();
export let { Manifold, Mesh } = wasm;

However, when I build this, the wasm file gets lost. The error I get is error.
failed to asynchronously prepare wasm: Error: ENOENT: no such file or directory, open '/XXX/GitHub/YYYY/.svelte-kit/output/server/entries/pages/geo/manifold.wasm' Aborted(Error: ENOENT: no such file or directory, o '/Users/GitHub/XXX/.svelte-kit/output/server/entries/pages/geo/manifold.wasm'). Build with -sASSERTIONS for more info.

This is because some how vite loses track of thr wasm file.

[elalish]

Exactly, this is either a Vite bug, or a Vite configuration problem. Ask there. If you get a good answer, would be great if you can link it back here!

[pyenthu]

https://stackoverflow.com/questions/78789863/wasm-works-in-dev-but-during-build-wasm-file-is-lost?noredirect=1#comment138913862_78789863

[pyenthu]

So one thing I am trying to do is, trying to at least on the browser side, load the file via a fetch call. I have used this when I compile to a wasm file. So far I can instantiate it, in a hacky way. But I am not able to get the equivalent of a wasm.setup() call when I do this.

if (browser) {
  const res = await fetch("/assets/manifold/manifold.wasm");
  const buffer = await res.arrayBuffer();
  const wasm_module = new WebAssembly.Module(buffer);
  console.log(WebAssembly.Module.imports(wasm_module));
  let importObject: any = {};
  for (let imp of WebAssembly.Module.imports(wasm_module)) {
    if (typeof importObject[imp.module] === "undefined")
      importObject[imp.module] = {};
    switch (imp.kind) {
      case "function":
        importObject[imp.module][imp.name] = () => {};
        break;
      // case "table": importObject[imp.module][imp.name] = new WebAssembly.Table({ initial: ???, maximum: ???, element: "anyfunc" }); break;
      // case "memory": importObject[imp.module][imp.name] = new WebAssembly.Memory({ initial: ??? }); break;
      case "global":
        importObject[imp.module][imp.name] = 0;
        break;
    }
  }
  const wasmIns = new WebAssembly.Instance(wasm_module, importObject);
  console.log("THIS IS THE FINAL ONE  ", wasmIns.exports);
}

[pyenthu]

For now I am able to figure out that you have 99 functions, but I don't know how to load this and get a correspondence between the Module and the Functions from the wasm file which is numbered from aa to Ra. {name:"a", "kind":function, name:aa}... and so on. Maybe you have a file that specified this somewhere.

[jirihon]

The functions are auto-generated by emscripten.

[jirihon]

Try this vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	optimizeDeps: {
		// disable optimization for manifold, it does not work for unknown reason
		exclude: ['manifold-3d'],
	},
});

And just use the manifold-3d npm package like this (e.g. in a Svelte component):

import Module from 'manifold-3d';

Module().then((manifold) => {
   manifold.setup();
   console.log(manifold);
})

I've tested it on a clean SvelteKit app created by npm create svelte@latest my-app and it works. The exclusion of manifold-3d from dependency optimization is the key here. But don't ask me why it's necessary. It seems that every WASM library needs to be excluded. :)

[pyenthu]

Thanks a ton. It worked!!
Not its time to get into the real math.
Absolutely wonderful library. Great work!!
Have been reading your blogs. You have a new fan.

[elalish]

Thank you! And glad you're unblocked. And thank you @jirihon for sharing the solution!