在浏览器运行Bevy Rust游戏报错：WebAssembly导入模块异常

问题场景 #

使用支持WebGL2的Bevy 0.11.0+开发Rust游戏，通过wasm-pack build --target web编译为WebAssembly后，在浏览器初始化时出现以下错误：

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

相关代码 #

初始化用的JavaScript代码：

import init, { run } from './game.js';

async function main() {
    await init('./game.wasm');
    run();
}

main();

Rust中导出的run函数：

#[wasm_bindgen]
pub fn run() {
    App::new()
        .add_plugins(DefaultPlugins)
    // 初始化更多系统和资源
}

环境信息 #

PopOS系统、最新版Chrome、最新版Rust，使用VSCode Live Server提供文件服务，已确认文件路径正确。

修复方法 #

1. 更新wasm-pack到最新版本 #

该错误常因wasm-pack版本与依赖不兼容导致，强制安装最新版：

cargo install wasm-pack --force

2. 适配Web环境配置Bevy插件 #

Bevy默认插件在Web环境下需要指定画布等配置，修改run函数：

#[wasm_bindgen]
pub fn run() {
    App::new()
        .add_plugins(DefaultPlugins.set(WindowPlugin {
            primary_window: Some(Window {
                canvas: Some("#canvas".to_string()), // 对应HTML中的canvas元素ID
                ..Default::default()
            }),
            ..Default::default()
        }))
        // 添加你的系统和资源
        .run();
}

同时在HTML中添加对应canvas元素：

<canvas id="canvas"></canvas>

3. 调整JavaScript初始化逻辑 #

部分情况下需修改导入和初始化方式，确保WASM正确加载：

import * as wasm from './game.js';

async function main() {
    await wasm.default('./game.wasm');
    wasm.run();
}

main();

另外注意：部分wasm-pack版本会生成game_bg.wasm文件，需确认WASM文件名与初始化路径一致。

4. 清理缓存重新构建 #

旧编译缓存可能引发异常，执行以下命令后重新构建：

cargo clean
wasm-pack build --target web --release

错误原因说明 #

这个错误本质是WASM模块实例化时找不到__wbindgen_placeholder__导入模块，通常由wasm-bindgen与wasm-pack版本不匹配、Bevy Web环境配置缺失，导致绑定代码生成异常引发。

内容的提问来源于stack exchange，提问作者jjreedv