Cannot load JS file from leptos app

vroussea commented 5 months ago

Hi there,

I'm running into an issue when trying to load a javascript file from a Leptos App body, tried on different browser (Chrome and Firefox). My issue is that the js file is loaded as an html file as you can see here: js_error

Here are some snippets of a simpler case in order to reproduce the error:

Cargo.toml

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

[dependencies]
leptos = { version = "0.6.11", features = ["csr", "nightly"] }

Leptos App

use leptos::*;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <html>
            <head>
                <title>My Leptos App</title>
            </head>
            <body>
                <p>"Hello, world!"</p>
                <script type="module" src="simple_script.js"></script>
            </body>
        </html>
    }
}

fn main() {
    mount_to_body(|| view! { <App/> });
}

Javascript file

console.log("js script here");

With the main goal being to load a bevy wasm file using javascript.

trunk settings

address = "127.0.0.1" port = 8080

Environment

OS: Windows 10 toolchain: 1.79.0-nightly trunk: 0.20.1 leptos: 0.6.11

ctron commented 5 months ago

The problem is that you did not copy over the script to the dist folder. All assets need to copied over in order to be available. For some assets (included via wasm-bindgen) trunk can auto-detect those. For others, you can flag them with a data-trunk attribute. For those you just want to "copy over", you can use rel="copy-file" or rel="copy-dir".

The guide should have you covered: https://trunkrs.dev/guide/assets/index.html

ctron commented 5 months ago

I also added an example for leptos based on your reproducer (thanks for that!) It's part of #799 … as I am not a leptos user, maybe you can enhance that a little bit to make it a better leptos example (if you think that makes sense).

trunk-rs / trunk