Invalid invocation when creating a TimeoutFuture

[Guara92]

Describe the Bug

I'm playing with the seed real world example and i got a strange exception on loading the application

Actual Behavior

This is the function that throw the exception:

pub fn notify_on_slow_load<Ms>(
    msg: Ms,
    error_msg: Ms,
) -> impl Future<Item = Ms, Error = Ms> {
    TimeoutFuture::new(SLOW_LOADING_THRESHOLD_MS)
        .map(|_| msg)
        .map_err(|_| error_msg)
}

called by the init function of the home page

pub fn init(session: Session, orders: &mut impl Orders<Msg, GMsg>) -> Model {
    let selected_feed = session
        .viewer()
        .cloned()
        .map_or_else(SelectedFeed::default, SelectedFeed::Your);

    orders
        .perform_cmd(loading::notify_on_slow_load(
            Msg::SlowLoadThresholdPassed,
            Msg::Unreachable,
        ))
        .perform_cmd(request::tag::load_list(Msg::TagsLoadCompleted))
        .perform_cmd(fetch_feed(
            session.viewer().cloned(),
            &selected_feed,
            PageNumber::default(),
        ));

    Model {
        session,
        selected_feed,
        ..Model::default()
    }
}

This is the exception

Uncaught (in promise) TypeError: Illegal invocation
    at __wbg_clearTimeout_42a8676f07d366c5 (app.e9527bfd8d64e7fbc4e9.js:89)
    at gloo_timers::sys::clear_timeout::h6b61a7affc7bb722 (:8000/wasm-function[15637]:0x604aa5)
    at <gloo_timers::future::TimeoutFuture as core::ops::drop::Drop>::drop::hd2d01337e37c0735 (:8000/wasm-function[9659]:0x56e910)
    at core::ptr::real_drop_in_place::hb3ee1e72a4dd9ef3 (:8000/wasm-function[14908]:0x5f5f75)
    at core::ptr::real_drop_in_place::h25ccf3a5381ce995 (:8000/wasm-function[14910]:0x5f601b)
    at core::ptr::real_drop_in_place::had8e8382d198844d (:8000/wasm-function[14983]:0x5f779c)
    at core::ptr::real_drop_in_place::h5feea4a304ff2612 (:8000/wasm-function[11962]:0x5b23d6)
    at core::ptr::real_drop_in_place::h05bca23ef7e03e59 (:8000/wasm-function[14862]:0x5f5098)
    at core::ptr::real_drop_in_place::h4c18c18e75b70558 (:8000/wasm-function[14937]:0x5f68ce)
    at core::ptr::real_drop_in_place::ha103b5a3b485ff59 (:8000/wasm-function[11988]:0x5b2ed9)
__wbg_clearTimeout_42a8676f07d366c5 @ app.e9527bfd8d64e7fbc4e9.js:89
gloo_timers::sys::clear_timeout::h6b61a7affc7bb722 @ wasm-02008f9a-15637:1
<gloo_timers::future::TimeoutFuture as core::ops::drop::Drop>::drop::hd2d01337e37c0735 @ wasm-02008f9a-9659:1
core::ptr::real_drop_in_place::hb3ee1e72a4dd9ef3 @ wasm-02008f9a-14908:1
core::ptr::real_drop_in_place::h25ccf3a5381ce995 @ wasm-02008f9a-14910:1
core::ptr::real_drop_in_place::had8e8382d198844d @ wasm-02008f9a-14983:1
core::ptr::real_drop_in_place::h5feea4a304ff2612 @ wasm-02008f9a-11962:1
core::ptr::real_drop_in_place::h05bca23ef7e03e59 @ wasm-02008f9a-14862:1
core::ptr::real_drop_in_place::h4c18c18e75b70558 @ wasm-02008f9a-14937:1
core::ptr::real_drop_in_place::ha103b5a3b485ff59 @ wasm-02008f9a-11988:1
futures::future::chain::Chain<A,B,C>::poll::h19433c5c37a06c56 @ wasm-02008f9a-489:1
<futures::future::then::Then<A,B,F> as futures::future::Future>::poll::h3953b26fdce7efe1 @ wasm-02008f9a-17709:1
<futures::future::map::Map<A,F> as futures::future::Future>::poll::h4e242c9556bed3fd @ wasm-02008f9a-1559:1
futures::future::chain::Chain<A,B,C>::poll::h276f8f9d67d6186e @ wasm-02008f9a-581:1
<futures::future::or_else::OrElse<A,B,F> as futures::future::Future>::poll::h43288626c7f52ded @ wasm-02008f9a-18322:1
<alloc::boxed::Box<F> as futures::future::Future>::poll::h34f31dea3fa42273 @ wasm-02008f9a-15303:1
futures::task_impl::Spawn<T>::poll_future_notify::{{closure}}::hcfea5fe414dc8dfa @ wasm-02008f9a-18385:1
futures::task_impl::Spawn<T>::enter::{{closure}}::h5f152fb002425d6d @ wasm-02008f9a-15513:1
futures::task_impl::std::set::hb88d84b63f982286 @ wasm-02008f9a-6620:1
futures::task_impl::Spawn<T>::enter::h99ed773013e28569 @ wasm-02008f9a-3932:1
futures::task_impl::Spawn<T>::poll_fn_notify::h563b1915b4a71748 @ wasm-02008f9a-7952:1
futures::task_impl::Spawn<T>::poll_future_notify::h55f0c8be74ddac81 @ wasm-02008f9a-13775:1
wasm_bindgen_futures::legacy::_future_to_promise::Package::poll::he53c158869fa99fa @ wasm-02008f9a-982:1
<wasm_bindgen_futures::legacy::_future_to_promise::Package as futures::task_impl::Notify>::notify::{{closure}}::hb99a7a96a4fe8c11 @ wasm-02008f9a-2955:1
<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h2be04fa648171548 @ wasm-02008f9a-5295:1
__wbg_elem_binding2 @ index.js?91f7:39
real @ index.js?91f7:1644
Promise.then (async)
__wbg_then_4a3adc894c334499 @ index.js?91f7:1481
__wbg_then_4a3adc894c334499 @ app.e9527bfd8d64e7fbc4e9.js:410
js_sys::Promise::then::hd7ba1961c5904727 @ wasm-02008f9a-9554:1
<wasm_bindgen_futures::legacy::_future_to_promise::Package as futures::task_impl::Notify>::notify::h1cb61f6cbc96b4da @ wasm-02008f9a-1055:1
<futures::task_impl::std::ArcWrapped<T> as futures::task_impl::Notify>::notify::hdf75bb43ce7f3932 @ wasm-02008f9a-12231:1
futures::task_impl::NotifyHandle::notify::h6791e475de777e91 @ wasm-02008f9a-13137:1
futures::task_impl::core::TaskUnpark::notify::h10b7d7bc2bee4046 @ wasm-02008f9a-16340:1
futures::task_impl::std::TaskUnpark::notify::hc0a2e4f134354439 @ wasm-02008f9a-7990:1
futures::task_impl::Task::notify::h528e273f64522f4a @ wasm-02008f9a-13139:1
futures::sync::oneshot::Inner<T>::drop_tx::hc2edd8fc0afaa654 @ wasm-02008f9a-994:1
<futures::sync::oneshot::Sender<T> as core::ops::drop::Drop>::drop::hfcd987c11bfd7d08 @ wasm-02008f9a-17664:1
core::ptr::real_drop_in_place::hd5ef672d0e61aaaa @ wasm-02008f9a-17313:1
futures::sync::oneshot::Sender<T>::send::h097f4cd25ecd8f1c @ wasm-02008f9a-8194:1
<wasm_bindgen_futures::legacy_shared::JsFuture as core::convert::From<js_sys::Promise>>::from::finish::h755298a229423546 @ wasm-02008f9a-2495:1
<wasm_bindgen_futures::legacy_shared::JsFuture as core::convert::From<js_sys::Promise>>::from::{{closure}}::hca9db344d01a89d0 @ wasm-02008f9a-8305:1
core::ops::function::FnOnce::call_once::h7b83c89f7b5bc0e8 @ wasm-02008f9a-12107:1
<T as wasm_bindgen::closure::WasmClosureFnOnce<A,R>>::into_fn_mut::{{closure}}::h85da06ff7cad44f8 @ wasm-02008f9a-9959:1
<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h2be04fa648171548 @ wasm-02008f9a-5295:1
__wbg_elem_binding2 @ index.js?91f7:39
real @ index.js?91f7:1644
Promise.then (async)
__wbg_then_7ad6b7db7ae2f63f @ index.js?91f7:1490
__wbg_then_7ad6b7db7ae2f63f @ app.e9527bfd8d64e7fbc4e9.js:413
js_sys::Promise::then2::hb4a882af4c1edc92 @ wasm-02008f9a-8094:1
<wasm_bindgen_futures::legacy_shared::JsFuture as core::convert::From<js_sys::Promise>>::from::h494d244393af52aa @ wasm-02008f9a-977:1
gloo_timers::future::TimeoutFuture::new::hbc1514f9f08486d2 @ wasm-02008f9a-4194:1
frontend::loading::notify_on_slow_load::h72ee5a71ad2edc7b @ wasm-02008f9a-7189:1

Firefox error is a little different

TypeError: 'clearTimeout' called on an object that does not implement interface Window.

[MartinKavik]

@Guara92 Could you try it with https://github.com/MartinKavik/seed-rs-realworld/tree/seed_master? - It uses released gloo and Seed's master.
I'm not able to reproduce it (Windows 10 + Firefox).

[Guara92]

@MartinKavik with the realworld example works fine, I'm trying to get it works inside your webpack starter project, inside a workspace where I've the backend. Maybe could be related to wasm-pack?
To reproduce simply put the src folder from the realworld example in the webpack starter project and start it with yarn.
FYI i'm on Manjaro Linux and I've the problem both on Chrome and Firefox.

[MartinKavik]

@Guara92: Could you try to clone and run https://github.com/MartinKavik/seed-quickstart-webpack/tree/realworld_alternative_gloo? This branch has integrated realworld example and gloo dependency is forwarded to fork's branch with workaround.

I think that the main reason for this issue are these calls: https://github.com/rustwasm/gloo/blob/master/crates/timers/src/sys.rs. Probably similar problem like the referenced one in comments in that sys.rs file - functions like clearTimeout aren't called directly on the window object, but their pointers are imported to Rust world and then they are called. However these functions are native, so they can be called only in context with associated object (window in our case). We need to call them directly (like I did in this commit) or bind window to change their this to correct context. The problem appeared in quickstart with Webpack because Webpack probably doesn't use window as the global context. And I don't know how to change it (if at all possible).

@Pauan / other gloo contributors - Can we write a better workaround for this or we have to wait until wasm-bindgen/wasm-bindgen#1046 is properly resolved?

[Guara92]

@MartinKavik I confirm that this workaround works! Thanks for the investigation and explanation of the problem!

[richard-uk1]

I believe the workaround for clear_timeout is now in gloo, @Pauan can you confirm?

[Pauan]

Thanks for the report, this should be fixed in version 0.2.0 (which is out now!)