reactjs - การโหลด wasm กับ react-ts และ vitejs

พยายามจะเลิกใช้ webpack และ create-react-app สำหรับ vitejs แต่กำลังมีปัญหากับไฟล์ wasm

import init from "swaplab2/dist/swaplab2.wasm?init";
import { setSwaplab2 } from "swaplab2";

export function TestPage(): React.ReactElement {
    const [swaplab2Loaded, setSwaplab2Loaded] = useState(false);

    useEffect(() => {
        //https://vitejs.dev/guide/features.html#webassembly
        if (!swaplab2Loaded) {
            init({})
                .then((instance) => {
                    setSwaplab2(instance);
                    setSwaplab2Loaded(true);
                })
        }
    });

แต่ได้รับข้อผิดพลาดเหมือน

TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function

ถ้าฉันเพิ่มอะไรบางอย่างเช่น

          init({ env: import.meta.env })

ฉันกลับได้

TypeError: WebAssembly.instantiate(): Import #72 module="wasi_snapshot_preview1" error: module is not an object or function

รู้สึกเหมือนฉันอยู่บนเส้นทางที่ผิดที่นี่ และขอคำแนะนำสักหน่อย

คำตอบ #1

Swaplab2 ถูกคอมไพล์โดยไม่มีสวิตช์แบบสแตนด์อะโลนและใช้ emscripten ABI ไม่ใช่ WASI https://github.com/emscripten-core/emscripten/wiki/WebAssembly-Standalone

ง่ายพอที่จะใช้เดินไปรอบ ๆ กับ vitejs

import swaplab2Url from "swaplab2/dist/swaplab2.wasm?url";
import { Swaplab2Module, setSwaplab2 } from "swaplab2";

export function TestPage(): React.ReactElement {
    const [swaplab2Loaded, setSwaplab2Loaded] = useState(false);

    useEffect(() => {
        //https://vitejs.dev/guide/features.html#webassembly
        if (!swaplab2Loaded) {
            Swaplab2Module({ locateFile: (path) => (path.endsWith(".wasm") ? swaplab2Url : path) }).then((loaded) => {
                setSwaplab2(loaded);
                setSwaplab2Loaded(true);
            });
        }
    });