MIME type problem

[collinsmarra]

I keep getting this error

So I am using trunk to serve a yew application. The point is to call M.AutoInit function from a materialize-css js library.
I have done my research and I notice that the web-server I am using is returning text/html instead of text/javascript
Is there a way I can configure trunk to help me with that?

#[wasm_bindgen(raw_module = "/materializejs/js/materialize.js")]
extern "C"{
    #[wasm_bindgen(js_namespace = ["M"])]

    type M;
    
    #[wasm_bindgen(static_method_of = M)]
    pub fn AutoInit();
}

pub fn auto_init_elements(){
    M::AutoInit();
}

#[function_component(Loader)]
pub fn load() -> Html{

    let div_ref = use_node_ref();
    {
        let div_ref = div_ref.clone();

        use_effect_with_deps(
            |div_ref|{
                let div = div_ref
                        .cast::<web_sys::HtmlElement>()
                        .expect("div_ref not attached to div element");
                let listener = Closure::<dyn Fn(Event)>::wrap(Box::new(|_|{
                    auto_init_elements();
                    // M::AutoInit();
                    // web_sys::console::log_1(&"clicked!".into());
                }));
                div.add_event_listener_with_callback(
                    "click",
                    listener.as_ref().unchecked_ref(),
                )
                .unwrap();

                move || {
                    div.remove_event_listener_with_callback(
                        "click",
                        listener.as_ref().unchecked_ref(),
                    ).unwrap()
                }

            },
            div_ref
        )
    }
        html!{
        <>
          <a id="dropdown2" class="dropdown-trigger btn" href="#" ref={div_ref} data-target="dropdown1">{"Drop Me!"}</a>
          <ul id="dropdown1"  class="dropdown-content">
                 <li><a href="#!">{"one"}</a></li>
                 <li><a href="#!">{"two"}</a></li>
                 <li class="divider" tabindex="-1"></li>
                 <li><a href="#!">{"three"}</a></li>
                 <li><a href="#!"><i class="material-icons">{"view_module"}</i>{"four"}</a></li>
                 <li><a href="#!"><i class="material-icons">{"cloud"}</i>{"five"}</a></li>
         </ul>
        </>
    }
}

[bluenote10]

I think I'm running into a similar issue with the trunk dev server. I'm simply trying to reference a basic styles.css from the index.html, but the browser rejects to apply it because the http response has the wrong MIME type:

[marc-mobeus]

I'm having the same issue

[ActuallyHappening]

Having very similar issue, chunk outputted by rollup that is not explicitly needed by wasm-bindgen is returned to the browser with the wrong MIME type:

Even though the file extension is .js

[ActuallyHappening]

Notice this comment: #198 (comment)
In my case, the file I was imagining to be my js chunk was actually the index.html, since wasm-bindgen didn't require that specific file it was not copied over to the server (/dist) and hence wasn't there to be served.

The MIME type shenanigans actually helped me this time, I can't treat HTML (actual and MIME type text/html) as a .js file!

If you searching through the networking logs for MIME types because the error says 'wrong mime type!', just take a peak at the actual data being send as well :)

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[github-actions]

This issue was closed because it has been stalled for 5 days with no activity.