fasttext.mjs The file does not exist

[khromov]

👋 I'm trying to use this library in a Vite / SvelteKit application, but I'm having a similar issue to #1

I'm getting:

The file does not exist at "/Users/k/Documents/GitHub/project/node_modules/.vite/deps/core/fasttext.mjs" which is in the optimize deps directory. The dependency might be incompatible with the dep optimizer. Try adding it to `optimizeDeps.exclude`.

Reproduction: https://www.sveltelab.dev/zez8tfh1obg0kjv

I also tried doing it client side only with const ftImport = await import('fasttext.wasm'); inside onMount > try, then calling const fastText = await ftImport.FastText.create() but got the same error, just client side instead:

Error loading FastText model: TypeError: Failed to fetch dynamically imported module: http://localhost:5173/node_modules/.vite/deps/core/fasttext.mjs?import

Code:

<script lang="ts">
    import { onMount } from 'svelte';
    import { FastText } from 'fasttext.wasm';

    let inputText = '';
    let labels: string[] = [];
    let fastText: FastText | null = null;
    let loading = true;
    let evaluating = false;
    let modelError = '';

    onMount(async () => {
        try {
            fastText = await FastText.create();
            await fastText.loadModel('./model_cooking.ftz');
            loading = false;
        } catch (error) {
            console.error('Error loading FastText model:', error);
            modelError = 'Failed to load the FastText model. Please check the console for more details.';
            loading = false;
        }
    });

    async function evaluateText() {
        if (!fastText || !inputText) return;

        evaluating = true;
        try {
            const result = await fastText.predict(inputText, 5);
            labels = result.map(r => r.label.replace('__label__', ''));
        } catch (error) {
            console.error('Error evaluating text:', error);
            labels = ['Error occurred during evaluation'];
        } finally {
            evaluating = false;
        }
    }
    </script>

    <svelte:head>
        <title>FastText Label Prediction</title>
    </svelte:head>

    <h1>FastText Label Prediction</h1>

    {#if loading}
        <p>Loading FastText model...</p>
    {:else if modelError}
        <p class="error">{modelError}</p>
    {:else}
        <textarea bind:value={inputText} placeholder="Enter text to evaluate" rows="4" cols="50"></textarea>
        <button on:click={evaluateText} disabled={evaluating}>
            {evaluating ? 'Evaluating...' : 'Evaluate'}
        </button>

        {#if labels.length > 0}
            <h2>Predicted Labels:</h2>
            <ul>
                {#each labels as label}
                    <li>{label}</li>
                {/each}
            </ul>
        {/if}
    {/if}

    <style>
        textarea {
            width: 100%;
            margin-bottom: 10px;
        }
        button {
            margin-bottom: 20px;
        }
        .error {
            color: red;
        }
    </style>

[khromov]

Managed to work around the import issue by manually getting the requires import urls via Vites ?url modifier and pass them to corePath/wasmPath:

   onMount(async () => {
        try {
            const ftImport = await import('fasttext.wasm');
            const corePath = await import('fasttext.wasm/dist/core/fasttext.mjs?url');
            const wasmPath = await import('fasttext.wasm/dist/core/fasttext.wasm?url');
            const modelPath = await import('./model_cooking.ftz?url');

            fastText = await ftImport.FastText.create({
                corePath: corePath.default,
                wasmPath: wasmPath.default,
            });
            await fastText.loadModel(modelPath.default);
            loading = false;
        } catch (error) {
            console.error('Error loading FastText model:', error);
            modelError = 'Failed to load the FastText model. Please check the console for more details.';
            loading = false;
        }
    });