Comments (2)
Let me see what might be failing.
from hirola.
Alright after a few diggings, I found out the error came up when the GenericNode tried to replace the child in .replace_child method.
Error message on the console:
DOMException: Failed to execute 'replaceChild' on 'Node': The node to be replaced is not a child of this node.
at http://localhost:8080/hirola-test-2b2ac71737c063b7.js:372:37
at handleError (http://localhost:8080/hirola-test-2b2ac71737c063b7.js:210:18)
at imports.wbg.__wbg_replaceChild_4793d6269c04dd25 (http://localhost:8080/hirola-test-2b2ac71737c063b7.js:371:75)
at web_sys::features::gen_Node::Node::replace_child::he830867bd8dc70e6 (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[347]:0x1e210)
at <hirola_core::generic_node::dom_node::DomNode as hirola_core::generic_node::GenericNode>::replace_child::h63616c973cb28588 (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[331]:0x1dc67)
at hirola_core::render::Render::update_node::hd22d8df583a745a5 (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[377]:0x1ea7a)
at hirola_core::generic_node::GenericNode::append_render::{{closure}}::{{closure}}::h8508a0af1044f1cb (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[180]:0x17bc5)
at core::ops::function::FnOnce::call_once{{vtable.shim}}::h02d970153e6ce003 (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[243]:0x1aea1)
at std::thread::local::LocalKey<T>::with::hc5592b11710e4779 (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[107]:0x11416)
at std::thread::local::LocalKey<T>::with::h9f412ca66d320c49 (http://localhost:8080/hirola-test-2b2ac71737c063b7_bg.wasm:wasm-function[42]:0x3518)
Meaning that the node that we are trying to replace with is not the child of it.
Hence, after reviewing my code, what I did was this:
html!{
<>
<div>
<Style />
<div class="homebody">
<Header router={(&router).clone()} />
<div class="intro">
<h1>"What's next?"</h1>
<p>"Try reading the official documentation "<a href="https://hirola-docs.vercel.app/" target="blank">"here"</a></p>
<div class="counter">
<h2>"Meanwhile..."</h2>
<p>"Check out this counter I made"</p>
<p class="output">{app_state.counter.get().num}</p>
<button on:click=add_one class="increase">"Increment One"</button>
<button on:click=minus_one class="decrease">"Decrease One"</button>
</div>
</div>
</div>
</div>
</>
}
Basically I wrapped the whole component with a hollow bracket <> </>
and apparently this causes the error. Removing or replacing those hollow bracket with <div> /<div>
(or probably any element that is not a hollow) fixed that.
Basically, wrapping the component with a hollow bracket will not make the component a "Child".
from hirola.
Related Issues (9)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hirola.