I am quite new to Yew. I’ve found tutorials and documentation useful, but I encounter problems when I try to integrate OpenLayers into my application. Specifically, I am encountering a module specifier error when attempting to load a JavaScript file. Below is the relevant part of my Rust code where I use wasm_bindgen to interface with JavaScript.
map.rs
use wasm_bindgen::prelude::*;
use yew::prelude::*;
#[wasm_bindgen(module = "js/ol_setup.js")]
extern "C" {
fn setupMap();
}
pub struct MapComponent;
impl Component for MapComponent {
type Message = ();
type Properties = ();
fn create(_ctx: &Context<Self>) -> Self {
Self
}
fn view(&self, _ctx: &Context<Self>) -> Html {
html! {
<div id="map" style="width: 100%; height: 400px;"></div>
}
}
fn rendered(&mut self, _ctx: &Context<Self>, first_render: bool) {
if first_render {
setupMap();
}
}
}
When I run the application, the JavaScript console throws the following error:
Uncaught TypeError: Failed to resolve module specifier "js/ol_setup.js". Relative references must start with either "/", "./", or "../".
The file ol_setup.js is part of my project structure and is located under static/js. My index.html is set up as follows:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>App title</title>
<link data-trunk rel="scss" href="static/css/main.scss"/>
<link data-trunk rel="copy-dir" href="static/img"/>
<link data-trunk rel="copy-dir" href="static/js"/>
</head>
<body>
</body>
</html>
I suspect the issue might be related to how the module path is resolved in the wasm_bindgen attribute. Somehow, it is not able to load it when it is moved to the folder dist. How should I correctly specify the path to ensure the JavaScript file is properly loaded? Also, is there a specific setup or configuration in Yew or Trunk that I might be missing to handle external JS files correctly?
I hope someone can provide a clue 🙂