Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Router hooks not available on the client in islands mode #3071

Open
bambooyuh opened this issue Oct 8, 2024 · 3 comments
Open

Router hooks not available on the client in islands mode #3071

bambooyuh opened this issue Oct 8, 2024 · 3 comments
Labels
documentation Improvements or additions to documentation

Comments

@bambooyuh
Copy link

bambooyuh commented Oct 8, 2024 •
edited
Loading

Describe the bug
The browser renders the html and css but throws an error: "Tried to access reactive URL outside a component." and "Uncaught (in promise) RuntimeError: unreachable"

Leptos Dependencies

Please copy and paste the Leptos dependencies and features from your Cargo.toml.

For example:

leptos = { version = "0.7.0-gamma", features = ["nightly", "experimental-islands"] }
leptos_axum = { version = "0.7.0-gamma", optional = true }
leptos_meta = { version = "0.7.0-gamma" }
leptos_router = { version = "0.7.0-gamma", features = ["nightly"] }

To Reproduce
Steps to reproduce the behavior:

  1. In the CLI, run: cargo leptos watch
  2. Open the browser at localhost:8080 and view the error in the developer console

Implementing use_location() and use_url() results in the same errors.
If you change Header() in pages/team_page.rs from a #[island] to #[component], the errors goes away.
Additionally, the navigating to the dashboard(or homepage) does not produce an error in the browser. My suspicion is that this page component does not contain an Island, like the team_page.

Relevant code files:
src/components/header.rs
src/pages/team_page.rs

Expected behavior
For there to be no browser errors, and for all interactivity to work.

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context
code>>>
Screenshot 2024-10-07 at 2 20 24 PM
Screenshot 2024-10-07 at 2 20 56 PM
Screenshot 2024-10-07 at 6 27 11 PM
https://github.com/bambooyuh/leptos_islands
@gbj gbj added the documentation Improvements or additions to documentation label Oct 8, 2024
@gbj
Copy link
Collaborator

gbj commented Oct 8, 2024

Router APIs provided via context are not available in islands, because the router is only running on the server.

@gbj gbj changed the title Browser panics and throws "outside a <Router> component." errors when using use_url() or use_location() Router hooks not available on the client in islands mode Oct 8, 2024
@bambooyuh
Copy link
Author

Got it. I moved the router APIs out of the Island and into a parent component.

The new browser error I get is:
"called Option::unwrap() on a None value"

Thank you for your help Greg!

@bambooyuh
Copy link
Author

bambooyuh commented Oct 8, 2024 •
edited
Loading

Ok so after further testing it turns out that switching from <body> to <div> within an island resolved the issue.
So using in a component is ok, but not in an island.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
documentation Improvements or additions to documentation
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@gbj @bambooyuh