DioxusLabs / docsite

Dioxuslabs.com documentation site
https://dioxuslabs.com
109 stars 92 forks source link

Some links to not navigate on click (href is valid) #288

Open dsgallups opened 6 days ago

dsgallups commented 6 days ago

Some of the left nav links do not navigate on click using the provided link. However, the anchor links themselves do navigate to existent pages.

image Of the following, the following sections fail to navigate:

Other links under Guide navigate correctly.

Host Properties

Possible explanation

I believe that the appended data-dioxus-id is causing the unclickable link behavior. Elements with this property fail to navigate properly.

Console output

wasm-bindgen: imported JS function that was not marked as `catch` threw an error: id is undefined

Stack:
hydrate@https://dioxuslabs.com/assets/dioxus/snippets/dioxus-interpreter-js-9ac3b5e174d5b843/inline0.js:2:3373
__wbg_get_imports/imports.wbg.__wbg_hydrate_311a1b3f31e7c28f/<@https://dioxuslabs.com/assets/dioxus/docsite.js:1461:21
logError@https://dioxuslabs.com/assets/dioxus/docsite.js:257:18
__wbg_get_imports/imports.wbg.__wbg_hydrate_311a1b3f31e7c28f@https://dioxuslabs.com/assets/dioxus/docsite.js:1458:66
dioxus_docs_site-70101fcb57b56825.wasm.dioxus_web::launch::launch_virtual_dom::{{closure}}::h803ca969f7f485be@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[296]:0x698fe
dioxus_docs_site-70101fcb57b56825.wasm.wasm_bindgen_futures::queue::Queue::new::{{closure}}::hd8ad9ff3465d5db7@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[763]:0xfd752
dioxus_docs_site-70101fcb57b56825.wasm.<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h9b711fe81333915a@https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:wasm-function[3374]:0x14e276
__wbg_adapter_57@https://dioxuslabs.com/assets/dioxus/docsite.js:327:10
real@https://dioxuslabs.com/assets/dioxus/docsite.js:286:20
Uncaught TypeError: id is undefined
    hydrate https://dioxuslabs.com/assets/dioxus/snippets/dioxus-interpreter-js-9ac3b5e174d5b843/inline0.js:2
    __wbg_hydrate_311a1b3f31e7c28f https://dioxuslabs.com/assets/dioxus/docsite.js:1461
    logError https://dioxuslabs.com/assets/dioxus/docsite.js:257
    __wbg_hydrate_311a1b3f31e7c28f https://dioxuslabs.com/assets/dioxus/docsite.js:1458
    __wbg_adapter_57 https://dioxuslabs.com/assets/dioxus/docsite.js:327
    real https://dioxuslabs.com/assets/dioxus/docsite.js:286
    __wbg_queueMicrotask_481971b0d87f3dd4 https://dioxuslabs.com/assets/dioxus/docsite.js:1621
    logError https://dioxuslabs.com/assets/dioxus/docsite.js:257
    __wbg_queueMicrotask_481971b0d87f3dd4 https://dioxuslabs.com/assets/dioxus/docsite.js:1620
    __wbg_finalize_init https://dioxuslabs.com/assets/dioxus/docsite.js:1914
    __wbg_init https://dioxuslabs.com/assets/dioxus/docsite.js:1948
    async* https://dioxuslabs.com/learn/0.5/getting_started/liveview/:113
[inline0.js:2:3373](https://dioxuslabs.com/assets/dioxus/snippets/dioxus-interpreter-js-9ac3b5e174d5b843/inline0.js)
    hydrate https://dioxuslabs.com/assets/dioxus/snippets/dioxus-interpreter-js-9ac3b5e174d5b843/inline0.js:2
    __wbg_hydrate_311a1b3f31e7c28f https://dioxuslabs.com/assets/dioxus/docsite.js:1461
    logError https://dioxuslabs.com/assets/dioxus/docsite.js:257
    __wbg_hydrate_311a1b3f31e7c28f https://dioxuslabs.com/assets/dioxus/docsite.js:1458
    h803ca969f7f485be https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:432382
    hd8ad9ff3465d5db7 https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:1038162
    dioxus_docs_site-70101fcb57b56825.wasm.<dyn core::ops::function::FnMut<(A,)>+Output = R as wasm_bindgen::closure::WasmClosure>::describe::invoke::h9b711fe81333915a https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:1368694
    __wbg_adapter_57 https://dioxuslabs.com/assets/dioxus/docsite.js:327
    real https://dioxuslabs.com/assets/dioxus/docsite.js:286
    (Async: VoidFunction)
    __wbg_queueMicrotask_481971b0d87f3dd4 https://dioxuslabs.com/assets/dioxus/docsite.js:1621
    logError https://dioxuslabs.com/assets/dioxus/docsite.js:257
    __wbg_queueMicrotask_481971b0d87f3dd4 https://dioxuslabs.com/assets/dioxus/docsite.js:1620
    h506dc593fe871e12 https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:1170279
    hd6ede8a582e93b25 https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:1234416
    h3943cf22103cdb50 https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:794683
    h97ac7ac3ddfc6161 https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:925633
    h880b6a858405990b https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:1390913
    main https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:946780
    wasm https://dioxuslabs.com/assets/dioxus/docsite_bg.wasm:1388482
    __wbg_finalize_init https://dioxuslabs.com/assets/dioxus/docsite.js:1914
    __wbg_init https://dioxuslabs.com/assets/dioxus/docsite.js:1948
    InterpretGeneratorResume self-hosted:1412
    AsyncFunctionNext self-hosted:799
    (Async: async)
    <anonymous>

Difference in element properties between clickable and non-clickable links:

The following anchor is on the provided page and is not clickable:

<a href="/learn/0.5/getting_started/fullstack" dioxus-prevent-default="onclick" data-node-hydration="79,click:1" data-dioxus-id="79"><li class="mr-1 rounded-md hover:text-sky-500 dark:hover:text-sky-400" data-node-hydration="80"><!--node-id81-->Fullstack<!--#--></li></a>

The following anchor is on the provided page and is clickable:

<a href="/learn/0.5/guide/state" dioxus-prevent-default="onclick" data-node-hydration="98,click:1"><li class="mr-1 rounded-md hover:text-sky-500 dark:hover:text-sky-400" data-node-hydration="99"><!--node-id100-->State<!--#--></li></a>

How to fix

I'd like to take a shot at fixing this linkage problem to learn more about dioxus, but I'm unsure where to start. I'm still going learning via the docs now, but a pointer in the right direction would be super helpful!

ealmloff commented 4 days ago

Hydration is failing because https://dioxuslabs.com/learn/0.5/getting_started/liveview/ doesn't exist in the latest version of the docsite. It might be in an older version of the 0.5 docs. I think https://github.com/DioxusLabs/docsite/pull/277 will fix this issue