英文:
loading wasm with react-ts and vitejs
问题
尝试切换到 Vite.js 而不是 Webpack 和 Create React App，但在处理 wasm 文件时遇到了问题。
代码部分不需要翻译。如果需要更多帮助，请提出具体问题。
英文:
Trying to leave webpack and create-react-app for vitejs. but are having problem with a wasm file.
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);
})
}
});
but get an error like
TypeError: WebAssembly.instantiate(): Import #0 module="env" error: module is not an object or function
If I add something like
init({ env: import.meta.env })
I instead get
TypeError: WebAssembly.instantiate(): Import #72 module="wasi_snapshot_preview1" error: module is not an object or function
Feels like I am on the wrong path here, and would appreciate a pointer
答案1
得分: 0
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);
});
}
});
英文:
Swaplab2 is compiled without the standalone switch and uses emscripten ABI and not WASI https://github.com/emscripten-core/emscripten/wiki/WebAssembly-Standalone
Was easy enough to get around with 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);
});
}
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论