无法运行Yew文档示例：Wasm解析失败求助

尝试按照Yew官方文档构建示例应用，执行trunk serve时出现错误，提示无法获取Wasm模块，解析字节时遇到意外字符'\0'，wasm-bindgen调用返回异常状态。以下是错误日志、代码文件及rustup环境信息，附解决建议：

错误日志 #

osboxes@osboxes:~/src/rust-learning/yewwwww$ trunk serve
2023-03-31T18:14:01.101996Z  INFO 📦 starting build
2023-03-31T18:14:01.102723Z  INFO spawning asset pipelines
2023-03-31T18:14:01.208652Z  INFO building yewwwww
    Finished dev [unoptimized + debuginfo] target(s) in 0.23s
2023-03-31T18:14:01.485763Z  INFO fetching cargo artifacts
2023-03-31T18:14:01.743985Z  INFO processing WASM for yewwwww
2023-03-31T18:14:01.780445Z  INFO using system installed binary app=wasm-bindgen version=0.2.84
2023-03-31T18:14:01.780708Z  INFO calling wasm-bindgen for yewwwww
error: failed getting Wasm module for '/home/osboxes/src/rust-learning/yewwwww/target/wasm32-unknown-unknown/debug/yewwwww.wasm'

Caused by:
    0: failed to parse bytes
    1: unexpected character '\0'
            --> <anon>:1:1
             |
           1 | 
             | ^
2023-03-31T18:14:02.182340Z ERROR ❌ error
error from HTML pipeline

Caused by:
    0: error from asset pipeline
    1: wasm-bindgen call returned a bad status
2023-03-31T18:14:02.182519Z  INFO 📡 serving static assets at -> /
2023-03-31T18:14:02.182563Z  INFO 📡 server listening at http://127.0.0.1:8080
cargo install --locked wasm-bindgen-cli^Cosboxes@osboxes:~/src/rust-learning/yewwwww$ 

代码文件 #

Cargo.toml #

[package]
name = "yewwwww"
version = "0.1.0"
edition = "2021"

[dependencies]
yew = { version = "0.20.0", features = ["csr"] }

src/main.rs #

use yew::prelude::*;

#[function_component]
fn App() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        move |_| {
            let value = *counter + 1;
            counter.set(value);
        }
    };

    html! {
        <div>
            <button {onclick}>{ "+1" }</button>
            <p>{ *counter }</p>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

index.html #

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Yew App</title>
    </head>
</html>

rustup环境信息 #

Default host: x86_64-unknown-linux-gnu
rustup home:  /home/osboxes/.rustup

installed toolchains
--------------------

stable-x86_64-unknown-linux-gnu (default)
beta-x86_64-unknown-linux-gnu
nightly-x86_64-unknown-linux-gnu
1.61.0-x86_64-unknown-linux-gnu

installed targets for active toolchain
--------------------------------------

wasm32-unknown-unknown
x86_64-unknown-linux-gnu

active toolchain
----------------

stable-x86_64-unknown-linux-gnu (default)
rustc 1.68.2 (9eb3afe9e 2023-03-27)

解决建议 #

• 检查wasm-bindgen版本兼容性：错误日志显示使用的wasm-bindgen版本为0.2.84，需确保该版本与Yew 0.20.0依赖的wasm-bindgen版本一致。可查看项目的Cargo.lock文件确认依赖版本，再安装匹配的CLI版本：

  cargo install --locked wasm-bindgen-cli@<匹配的版本号>
  

• 清理编译缓存：删除项目的target目录和Trunk缓存目录.trunk，重新编译：

  cargo clean
  rm -rf .trunk
  trunk serve
  

• 验证Wasm文件生成：手动执行Wasm编译命令，检查生成的文件是否正常：

  cargo build --target wasm32-unknown-unknown
  

  若生成的yewwwww.wasm文件为空或大小异常，重新安装Wasm目标：

  rustup target remove wasm32-unknown-unknown
  rustup target add wasm32-unknown-unknown
  

• 更新Trunk工具：安装最新版本的Trunk，避免版本兼容问题：

  cargo install trunk --locked
  

• 检查文件权限：确保当前用户对项目目录和~/.rustup目录有完整读写权限，避免编译过程中无法生成或读取Wasm文件。

内容的提问来源于stack exchange，提问作者T. Francis