How to use subxt in yew.rs font-end app

[GinmusWJQ]

Here is test demo, but always fail to run.

• Cargo.toml

[dependencies]
yew = { version = "0.20.0", features = ["csr"] }
gloo = "0.8.0"
wasm-bindgen-futures = "0.4.32"
subxt = { version="0.27.0", default-features = false, features = ["jsonrpsee-web"] }

• main.rs

use gloo::console::log;
// use sp_keyring::AccountKeyring;
use subxt::{OnlineClient, PolkadotConfig};
use wasm_bindgen_futures;
use yew::prelude::*;

#[subxt::subxt(runtime_metadata_path = "metadata.scale")]
pub mod polkadot {}

#[function_component(App)]
fn app() -> Html {
    wasm_bindgen_futures::spawn_local(async move {
        let api = OnlineClient::<PolkadotConfig>::new().await.unwrap();
        log!("hello world");
    });
    html! {
      <>
          <h1 class="text-3xl font-bold underline bg-slate-100">{"Hello world!"}</h1>
      </>
    }
}

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

The problem is #[subxt::subxt(runtime_metadata_path = "metadata.scale")] pub mod polkadot {} always throw an error

error: Failed to decode metadata: Could not decode `RuntimeMetadataPrefixed.1`:
           Could not decode `RuntimeMetadata`, variant doesn't exist

I followed the steps exactly in the official documentation

1. Build a local blockchain
2. run cargo install subxt-cli
3. run subxt metadata -f bytes > metadata.scale

What steps I forgot and need to do?
By the way, I find if I don't specify the subxt as subxt = { version="0.27.0", default-features = false, features = ["jsonrpsee-web"] } in my Cargo.toml, it seem like impossible to work with Yew.rs.

[Neopallium]

Sounds like the metadata.scale file is using an older metadata version based on this error Could not decode RuntimeMetadata, variant doesn't exist.

subxt version 0.27 is using frame-metadata: 15.2.0 which would only support v14 chain metadata. Some chains are using v15 now. The current subxt 0.31 is using a newer frame-metadata that supports v15 chain metadata. That might fix your issue.

[jsdw]

And just to add to this, we also have a WASM + Yew example here which may be helpful:

https://github.com/paritytech/subxt/tree/master/examples/wasm-example