Skip to content

Islands breaks client side routing #7

Description

@tyler-harpool

Islands seems to break client side routing. Here is my dep and home.rs.
I get hydration warnings, runtime error unreachable, called Option::unwrap() on a None value which I do not know where to look next.

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

[dependencies]
anyhow = "1"
cfg-if = "1.0.0"
console_error_panic_hook = "0.1"
http = "1.0"
leptos = {version = "0.6.15", features=["experimental-islands"]}
leptos_integration_utils = { version = "0.6.15", optional = true }
leptos_meta = "0.6.15"
leptos_router = "0.6.15"
leptos-spin = { version = "0.2.0", features=["experimental-islands"], optional = true}
serde = "1.0"
spin-sdk = { version = "3.0.1", optional = true }
wasm-bindgen = { version = "0.2", optional = true }

[workspace]

[features]
csr = ["leptos/csr", "leptos_meta/csr", "leptos_router/csr"]
hydrate = [
  "leptos/hydrate",
  "leptos_meta/hydrate",
  "leptos_router/hydrate",
  "dep:wasm-bindgen",
]
ssr = [
  "leptos/ssr",
  "leptos_meta/ssr",
  "leptos_router/ssr",
  "leptos/spin",
  "dep:spin-sdk",
  "dep:leptos-spin",
  "dep:leptos_integration_utils",
]

# Defines a size-optimized profile for the WASM bundle in release mode
[profile.wasm-release]
inherits = "release"
opt-level = 'z'
lto = true
codegen-units = 1
panic = "abort"


[package.metadata.leptos]
# [Optional] The source CSS file. If it ends with .sass or .scss then it will be compiled by dart-sass into CSS. The CSS is optimized by Lightning CSS before being written to <site-root>/<site-pkg>/app.css
style-file = "public/main.css"

# Assets source dir. All files found here will be copied and synchronized to site-root.
# The assets-dir cannot have a sub directory with the same name/path as site-pkg-dir.
#
# Optional. Env: LEPTOS_ASSETS_DIR.
assets-dir = "public"

# Mandatory fields for Spin apps
bin-target-triple = "wasm32-wasi"
bin-features = ["ssr"]
bin-default-features = false
lib-features = ["hydrate"]
lib-default-features = false

home.rs, using the example from the book.

use leptos::*;
// use leptos_router::*;
// use crate::pages::components::default_layout::DefaultLayout;
#[component]
pub fn Home() -> impl IntoView {
    view! {
        <h1>"Welcome to Leptos!"</h1>
        <Counter/>
        <a href="/new_page">New Page</a>
    }
}

#[island]
fn Counter() -> impl IntoView {
    // Creates a reactive value to update the button
    let (count, set_count) = create_signal(0);
    let on_click = move |_| set_count.update(|count| *count += 1);

    view! {
        <button on:click=on_click>"Click Me: " {count}</button>
    }
}

#[component]
pub fn NewPage() -> impl IntoView {
    view! {
        <h1>"Welcome to Leptos!"</h1>
        <Counter/>
        <a href="/">Home</a>
    }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions