Uncaught TypeError: Cannot read properties of undefined (reading 'length')

[callmeclover]

Error message

Uncaught TypeError: Cannot read properties of undefined (reading 'length') in https://cloverdev.serv00.net/pkg/rwst.js at 68:19. TypeError: Cannot read properties of undefined (reading 'length')

I used wasm-pack build --target web to generate everything in the pkg folder. I am currently unable to provide the full error message, but you can navigate to https://cloverdev.serv00.net/index.html (index.html must be specified) to see it yourself in the console. I have console-panic-error-hook, but this looks like an issue with wasm-pack. Here's my code:

lib.rs

mod model;
use model::*;

use wasm_bindgen::prelude::*;
use web_sys::{window, Element};
use ewebsock::{Options, WsEvent, WsMessage::Text};
use serde_json;
use urlencoding::encode;

extern crate console_error_panic_hook;
use std::panic;
use web_sys_main_loop::FrameState;

#[wasm_bindgen]
pub fn main() {
    panic::set_hook(Box::new(console_error_panic_hook::hook));

    let window = window().expect("no global `window` exists");
    let document = window.document().expect("should have a document on window");
    let body = document.body().expect("document should have a body");

    let (mut sender, receiver) = ewebsock::connect("wss://cloverdev.serv00.net/ws", Options::default()).expect("");
    sender.send(ewebsock::WsMessage::Text(serde_json::to_string(&MessageSent { user: "test42".to_string(), msg: "hello".to_string(), time: None }).unwrap()));
    web_sys_main_loop::start(&window, move |_frame_state: FrameState|  {
        while let Some(WsEvent::Message(Text(event))) = receiver.try_recv() {
            match serde_json::from_str::<MessageTypes>(&event).unwrap() {
                MessageTypes::MessageSent(response) => {
                    /* MESSAGE TEMPLATE:

                        <div style='margin: 10px 0;'>
                            <div class="userDisplay">
                                ${jdenticon.toSvg(username[2], 26)}
                                <span>
                                    <a href='/profile/${encodeURIComponent(username)}'>
                                        username
                                    </a>
                                    <span class="msgTime">
                                        [at <time datetime="timeSent">
                                        timeSent
                                        </time>]
                                    </span>
                                </span>
                            </div>
                            <div id='message'>
                                <pre>
                                    message
                                </pre>
                            </div>
                        </div>

                    */
                    println!("Recieved event 'MessageSent' data (1/1) {:?}", response);
                    let _ = body.append_child(&create_message_element(response.clone()));
                },
                MessageTypes::RetrieveMessages(response) => {
                    let iterator = response.msgs.iter();
                    for (i, d) in iterator.clone().enumerate() {
                        println!("Recieved event 'RetrieveMessages' data ({}/{}) {:?}", i+1, iterator.len(), d);
                        let _ = body.append_child(&create_message_element(d.clone()));
                    }
                },
                MessageTypes::UserJoin(response) => {
                    println!("Recieved event 'UserJoin' data (1/1) {:?}", response);
                },
                MessageTypes::UserLeft(response) => {
                    println!("Recieved event 'UserLeft' data (1/1) {:?}", response);
                }
            } 
        }
    });
}

fn create_message_element(res: MessageSent) -> Element {
    // Get the document and create a new div element
    let document = window().unwrap().document().unwrap();
    let outer_div = document.create_element("div").unwrap();
    outer_div.set_attribute("style", "margin: 10px 0;").unwrap();

    // Create the inner div with the class "userDisplay"
    let user_display_div = document.create_element("div").unwrap();
    user_display_div.set_class_name("userDisplay");

    // Create and append the jdenticon element
    /*let jdenticon_svg = document.create_element("svg").unwrap();
    jdenticon_svg.set_inner_html(&format!("{}", jdenticon.to_svg(username[2], 26))); We'll wait for this...
    user_display_div.append_child(&jdenticon_svg).unwrap();*/

    // Create and append the anchor element
    let anchor = document.create_element("a").unwrap();
    anchor.set_attribute("href", &format!("/profile/{}", encode(&res.user))).unwrap();
    anchor.set_text_content(Some(&res.user));
    user_display_div.append_child(&anchor).unwrap();

    // Create and append the span element with class "msgTime"
    let time_span = document.create_element("span").unwrap();
    time_span.set_class_name("msgTime");
    time_span.set_inner_html(&format!(
        "[at <time datetime='{:?}'>{}</time>]",
        res.time, res.time.expect("no time when creating msg element").format("%x %r")
    ));
    user_display_div.append_child(&time_span).unwrap();

    outer_div.append_child(&user_display_div).unwrap();

    // Create the message div with id "message" and a pre element inside
    let message_div = document.create_element("div").unwrap();
    message_div.set_id("message");

    let pre_element = document.create_element("pre").unwrap();
    pre_element.set_text_content(Some(&res.msg));

    message_div.append_child(&pre_element).unwrap();

    outer_div.append_child(&message_div).unwrap();

    return outer_div;
}

model.rs

use serde::{Deserialize, Serialize};
use chrono::{DateTime, Utc};

#[derive(Serialize, Deserialize, Debug, Clone)]
#[serde(untagged)]
pub enum MessageTypes {
  MessageSent(MessageSent),
  RetrieveMessages(RetrieveMessages),
  UserJoin(UserJoin),
  UserLeft(UserLeft)
}

#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct MessageSent {
    pub msg: String,
    pub user: String,
    #[serde(skip_serializing)]
    pub time: Option<DateTime<Utc>>
}
#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct RetrieveMessages {
    pub msgs: Vec<MessageSent>
}

// User related messages
#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct UserJoin {
    pub userjoin: String
}
#[derive(Serialize, Deserialize, Debug, Clone)]
pub struct UserLeft {
    pub userleft: String
}

Cargo.toml

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

[package.metadata.wasm-pack.profile.release]
wasm-opt = false

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

[dependencies]
wasm-bindgen = "0.2.92"
ewebsock = "0.5.0"
chrono = { version = "0.4.37", features = ["serde", "wasmbind"] }
serde = { version = "1.0.197", features = ["derive"] }
serde_json = "1.0.115"
urlencoding = "2.1.3"
web-sys-main-loop = "0.1.8"
console_error_panic_hook = "0.1.7"

[dependencies.web-sys]
version = "0.3.4"
features = [
  'Document',
  'Element',
  'HtmlElement',
  'Node',
  'Window',
  'BinaryType',
  'Blob',
  'ErrorEvent',
  'FileReader',
  'MessageEvent',
  'ProgressEvent',
  'WebSocket',
]

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My Rust + Webpack project!</title>
  </head>
  <body>
    <script type="module">
      import init, { main } from "./pkg/rwst.js";
      window.onerror = (a,b,c,d,e) => { window.alert(`${a} in ${b} at ${c}:${d}. ${e}`) }
      init().then(() => {
        main();
      });
    </script>
  </body>
</html>

wasm-pack doesn't appear to generate any errors, so I don't know what could be going wrong. Any help would be nice, thank you all!

[daxpedda]

I didn't look too close into it because its not a really a minimal example, but if you believe this is a wasm-pack issue you should report it there and not here.

[ctm]

I haven't looked too closely at this, either, but it may be the same thing that I'm seeing that I'm about to write up as an issue for web-sys. My example is a little smaller. Other than the fact that it drags in both yew and trunk, the guts are simply:

    // WebSocket::new does not attempt to make the connection before
    // returning, so the unwrap() here is not related to whether or
    // not the connection succeeds.
    let ws = WebSocket::new("wss://example.com/not-available").unwrap();

    // This is largely the same code from wasm-sockets, because it's
    // that code that I'm having trouble with.  The problem isn't with
    // wasm-sockets.  The problem is that the ErrorEvent::message
    // can't be called on then ErrorEvent that is passed into the
    // onerror handler.  I've also tried some a similar methods,
    // ErrorEvent::filename, and it too had trouble.
    let onerror_callback = Closure::wrap(Box::new(move |e: ErrorEvent| {
        e.message(); // This causes the program to crash, which can be seen
                     // by looking in the JavaScript console.
        // e.filename(); // as does this
    }) as Box<dyn Fn(ErrorEvent)>);
    ws.set_onerror(Some(onerror_callback.as_ref().unchecked_ref()));
    onerror_callback.forget();

with the call to e.message() blowing up with Uncaught TypeError: Cannot read properties of undefined (reading 'length').

I lack the skill to know whether this is due to web-sys specific code or wasm-bindgen, but I've verified that if I use ErrorEvent::new to create an ErrorEvent, I can use message() on that instantiation just fine, so I'm going to report it to web-sys.

[daxpedda]

It looks to me like the issue is just that ErrorEvent is the wrong type.
The specification has nothing to say on the type of the error event, so it probably is just Event.

Doing a quick test in Firefox confirms that.

[ctm]

Yup, according to MDN, you're right! Thanks!