Wasm_bindgen and js_sys showing error in browser

I am compiling rust to wasm with wasm-pack. I am using wasm_bindgen and js_sys. The code I am writing so far is very simple. Everything works normally until I start using js sys, I get the error

Module not found: Can't resolve 'wbg'

from next.js.

This works:

#[wasm_bindgen] //Get distance based on starting x,y and ending x,y
pub fn get_distance_4p(sx: f32, sy: f32, ex:f32, ey: f32) -> f32 {
    let delta_x: f32 = sx - ex;
    let delta_y: f32 = sy - ey;
    let sqrt_x: f32 = delta_x.powf(2.0);
    let sqrt_y: f32 = delta_y.powf(2.0);
    let _c = Float32Array::new_with_length(10);
    (sqrt_x + sqrt_y).sqrt()
}

but once I add a second fn using js_sys I get the above error. For example:

#[wasm_bindgen]
pub fn return_jsarr(arr: &Float32Array) -> Float32Array {
    let r: Vec<f32>= arr.to_vec();
    let out: Vec<f32> = r.into_iter()
        .map(|x| x * 2.0)
        .collect::<Vec<_>>();
   
   Float32Array::from(&out[..])
}

I am import the wasm into my next project as follows

import {
  get_distance_4p,
} from "@/public/pkg/recad_wasm_bg.wasm";

useEffect(() => {
     get_distance_4p(...)
}, [])

Anything will help, I am just getting into rust and wasm so my problem might be simple.
For reference here is my cargo.toml

[package]
name = "recad-wasm"
version = "0.1.0"
edition = "2021"


[lib]
crate-type = ["cdylib"]

[dependencies]
js-sys = "0.3.64"
wasm-bindgen = "0.2.87"

When I compile I run wasm-pack build --target web

Thanks again

You can't directly import the .wasm module for wasm-bindgen based projects. Wasm-bindgen creates a wrapper .js file that you need to import instead. This .js file provides the wasm module with access to all javascript interfaces it needs.

1 Like

The thing is that when I only use wasm bind gen I can just import the wasm module like that. But when I add the js_sys it doesn’t allow me to use it. You’re saying just import the js file that the compiler gives me?

Yes - if you look at the generated JavaScript file, you'll see that it provides various bits of JavaScript that bind the WebAssembly module with JavaScript. Without those little snippets, you have a raw WASM module without any of the bindgen bits that link WASM and JavaScript together.

I figured out what I needed to do. What you said helped me find it so thank you. I had to install the module into my project (I think) and also call the default export init function from the js module first before doing anything else.

Thanks

This topic was automatically closed 90 days after the last reply. We invite you to open a new topic if you have further questions or comments.