net::ERR_FILE_NOT_FOUND when trying to load wasm in plugin

[tmayoff]

I’m trying to load a wasm package from npm and am encountering this error:

app://obsidian.md/assets/recipe_rs_bg.wasm net::ERR_FILE_NOT_FOUND

The file does indeed exist in the plugin/assets folder.

// vite.config.ts
import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
import builtins from 'builtin-modules';
import UnoCSS from 'unocss/vite';
import { type PluginOption, defineConfig } from 'vite';
import wasmPack from 'vite-plugin-wasm-pack';

const setOutDir = (mode: string) => {
    switch (mode) {
        case 'development':
            return './test_vault/.obsidian/plugins/tmayoff-meals';
        case 'production':
            return './build';
    }
};

// biome-ignore lint/style/noDefaultExport: <explanation>
export default defineConfig(({ mode }) => {
    return {
        plugins: [
            wasmPack([], ['recipe-rs']),
            UnoCSS(),
            svelte({
                preprocess: vitePreprocess(),
                compilerOptions: {
                    customElement: true,
                },
            }) as PluginOption,
        ],
        build: {
            ssrEmitAssets: true,
            lib: {
                entry: 'src/main',
                formats: ['cjs'],
            },
            rollupOptions: {
                output: {
                    entryFileNames: 'main.js',
                    assetFileNames: 'styles.css',
                },
                external: [
                    'obsidian',
                    'electron',
                    '@codemirror/autocomplete',
                    '@codemirror/collab',
                    '@codemirror/commands',
                    '@codemirror/language',
                    '@codemirror/lint',
                    '@codemirror/search',
                    '@codemirror/state',
                    '@codemirror/view',
                    '@lezer/common',
                    '@lezer/highlight',
                    '@lezer/lr',
                    ...builtins,
                ],
            },
            outDir: setOutDir(mode),
            emptyOutDir: false,
            sourcemap: mode === 'production' ? false : 'inline',
        },
    };
});

// main.ts
import { type App, Modal, Plugin, PluginSettingTab, Setting, TFile, requestUrl } from 'obsidian';
import { get } from 'svelte/store';
import { Context } from './context';
import { OpenMealPlanNote } from './meal_plan/plan';
import { AddFileToShoppingList, AddMealPlanToShoppingList, ClearCheckedIngredients } from './meal_plan/shopping_list';
import SearchRecipe from './recipe/SearchRecipe.svelte';
import { MealSettings, RecipeFormat } from './settings';
import 'virtual:uno.css';
import init, { scrape } from 'recipe-rs';

// biome-ignore lint/style/noDefaultExport: <explanation>
export default class MealPlugin extends Plugin {
    ctx = new Context(this);

    async onload() {
        await this.loadSettings();
        await init();

        let dom_text = await requestUrl('https://www.allrecipes.com/recipe/21014/good-old-fashioned-pancakes/').text;
        console.log(scrape('https://www.allrecipes.com/recipe/21014/good-old-fashioned-pancakes/', dom_text));

        this.ctx.loadRecipes(undefined);

...

The branch of the plugin: GitHub - tmayoff/obsidian-meals at recipe-rs
The rust library: GitHub - tmayoff/obsidian-meals at recipe-rs
npm: recipe-rs - npm

Any help is appreciated

[tmayoff]

I think I managed to fix it.

I changed the onload function to this to initialize the wasm library

        const wasmPath = this.app.vault.adapter.getResourcePath(
            `${this.app.vault.configDir}/plugins/${this.manifest.id}/assets/recipe_rs_bg.wasm`,
        );
        await init(wasmPath);