Common Wasm/browser Troubleshooting

[matheus23]

Let's use this discussion thread for common issues faced when trying to use iroh in an application that's complied to target=wasm32-unknown-unknown that are then used in browsers :)

If you encounter an issue, look for the existing posts that mention it, or if you can't find a fitting answer, comment with your problem ✌️

[matheus23]

If you're facing issues compiling one of iroh's dependencies, ring on MacOS, e.g. with this error:

warning: [email protected]: error: unable to create target: 'No available targets are compatible with triple "wasm32-unknown-unknown"'
warning: [email protected]: 1 error generated.
error: failed to run custom build command for `ring v0.17.8`

This might be related to this issue.

Apple Clang is a fork of Clang that is specialized to Apple's wishes. It doesn't support wasm32-unknown-unknown, at least when I tried. You need to download and use llvm.org Clang instead.

You can do so by installing llvm clang via homebrew. There are some further instructions in the linked issue's comments.

[Frando]

Also, make sure that you don't have Android build tools (LLVM, Clang etc) added to your PATH. Sometimes, when working on android projects, you might modify your PATH to include build tools from the Android SDK. This can mess up builds of native dependencies like ring. So make sure to revert those PATH changes if you hit issues.

[mommysgoodpuppy]

Same issue on windows 10/11 using llvm(winget). It seems clang on windows doesn't support wasm by default and from my search there's no alternative with full support baked in. It's still possible manually link but requires fiddling around for std lib support which ring seems to need. Probably better to use wsl or docker for now.

[matheus23]

If you get an error like this:

   Compiling getrandom v0.3.1
error: The wasm32-unknown-unknown targets are not supported by default;
you may need to enable the "wasm_js" configuration flag.
Note that enabling the `wasm_js` feature flag alone is insufficient.
For more information see: https://docs.rs/getrandom/#webassembly-support
   --> .cargo/registry/src/index.crates.io-6f17d22bba15001f/getrandom-0.3.1/src/backends.rs:159:9
    |
159 | /         compile_error!(
160 | |             "The wasm32-unknown-unknown targets are not supported by default; \
161 | |             you may need to enable the \"wasm_js\" configuration flag. Note \
162 | |             that enabling the `wasm_js` feature flag alone is insufficient. \
163 | |             For more information see: \
164 | |             https://docs.rs/getrandom/#webassembly-support"
165 | |         );
    | |_________^

Then that's due to depending on getrandom version 0.3 in your application without enabling the required rustflags to enable support with wasm-bindgen.

(At this point, iroh (version 0.32 and 0.33) doesn't actually depend on getrandom 0.3 in browsers at all, but this is a common issue nonetheless an we'll depend on getrandom 0.3 in the future.
This isn't correct anymore, as e.g. stun-rs has updated to rand 0.9 in a patch release.)

Make sure to read the linked documentation section carefully.
Then, make sure you're enabling the wasm_js feature of getrandom:

getrandom = { version = "0.3", features = ["wasm_js"] }

And enable the necessary rustflags when building:

$ RUSTFLAGS='--cfg getrandom_backend="wasm_js"' cargo build --target=wasm32-unknown-unknown # ... etc.

Alternatively, you can also set these rust flags in your .cargo/config.toml:

[target.wasm32-unknown-unknown]
rustflags = ["--cfg", 'getrandom_backend="wasm_js"']

[matheus23]

If you have an issue building ring with an error message like this:

  cargo:warning=Compiler family detection failed due to error: ToolNotFound: Failed to find tool. Is `clang` installed?

Then make sure to install 32 bit clang in your environment.

I personally got this error on NixOS, and can fix it there by running the build inside a nix shell or installing the clang_multi nix pkg:

$ nix shell nixpkgs#clang_multi
$ cargo build --target=wasm32-unknown-unknown # ...

[taotien]

Is it possible to use this with crates like dioxus, egui, etc. that target browsers? I spent a few hours trying to set it up, but kept getting errors that this and that are missing in mio.

build_error.txt

[Frando]

This likely means that some crate in your dependency graph is enabling tokio features that depend on mio and thus are incompatible with wasm32-unknown-unknown (e.g. the full, net and fs features).
You can use the cargo tree command with the -e features option to find out more:

cargo tree -i mio -e features --target wasm32-unknown-unknown

The output is a bit hard to parse, but should tell you which dependency or feature needs to be disabled. If you struggle to find it feel free to post the output of the above command here.

[matheus23]

Make sure you're using iroh with no default features. I.e. in your Cargo.toml: iroh = { version = "0.33", default-features = false }!
(You won't have to do that starting with iroh 0.34)

[taotien]

Sorry, I think the mio thing was an earlier error, and I was confusing it with something else I was encountering later on. I did copy over the dependencies from the examples, but something was probably still there. Part of my problem was just being hasty during a hackathon. I just tried with a fresh repository, and is seems to build fine.

The cargo tree flags will be handy in the future, so thank you!