DEV Community

Cover image for YEW Tutorial: 07 Custom like a bike

YEW Tutorial: 07 Custom like a bike

Davide Del Papa on June 15, 2020

(Photo by Harley-Davidson on Unsplash) In this seventh part we are going to see how to update to the new version of yew; then again we will how to...
Read full post
Collapse
 
chasahodge profile image
Charles Hodge •

Davide, this is Great tutorial and I have been enjoying the learning thus far. However, on Part 7 I cannot get any version to compile (as of 7//202020). Error Messages:

v7p1 button.rs:
use yewtil::{Pure, PureComponent); no 'PureComponent' or 'Pure' in root

v7p2 button.rs and v7p3 button.rs: :
error[E0432]: unresolved import yewtil::function_component
--> src/components/button.rs:2:5
|
2 | use yewtil::function_component;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^ no function_component in the root

error[E0432]: unresolved import crate::components::button::Button
--> src/app.rs:1:5
|
1 | use crate::components::button::Button;
| ^^^^^^^^^^^^^^^^^^^^^^^^^^^------
| | |
| | help: a similar name exists in the module: button
| no Button in components::button

error: cannot determine resolution for the attribute macro function_component
--> src/components/button.rs:4:3
|
4 | #[function_component(Button)]
| ^^^^^^^^^^^^^^^^^^
|
= note: import resolution is stuck, try simplifying macro imports

error: cannot find attribute prop_or_default in this scope
--> src/components/button.rs:5:50
|
5 | pub fn button(onsignal: &Callback, #[prop_or_default] title: String) -> Html { | ^^^^^^^^^^^^^^^

Not sure how to resolve these errors. Tried replacing the button.rs code with the button.rs example on the YEW GitHub site but no luck there. Any thoughts?

Collapse
 
chasahodge profile image
Charles Hodge •

Fixed it! In the Cargo.toml file change the yewtil = line to:
yewtil = { git = "github.com/yewstack/yew", features = ["fetch", "pure"] }

Collapse
 
davidedelpapa profile image
Davide Del Papa •

Yes, it's something I actually explain further on with the tutorials. I shouldn't have committed to the main github branch, because the Yew interface changed so much... But alas, I did. In any case, thank you for your bugfix! I do really appreciate people are taking this project seriously! ❤️❤️❤️

Collapse
 
alxrod profile image
Alex Rodriguez •

Great tutorial. Was really helpful for me. Only problem I had was that the API doesn't provide the id, age, or salary as a string. Since it puts it out as an integer, I had to change the Employee struct to i32 for those fields. I really liked the tutorial but I just wanted to put this out there for anyone who got stuck with the fetch error that it couldn't deserialize. It took me way longer than it should have for me to realize it was only an issue with the fields being differently typed.

Collapse
 
davidedelpapa profile image
Davide Del Papa •

Thank you for taking the time to report this.
I have looked into the matter, but the actual API have not changed, it still gives string-wrapped numbers, so I cannot re-create your problem. Can you please show me the piece of code you are having troubles with?

While working on this I discovered instead that Yew and Yewtil have buped up version, and also that there is a bug introduced few hours ago in wasm-bindgen that clashes with gloo-events bringing down the whole dependency tree! It was introduced in the version 0.2.66 released yesterday.

I'm working on fixing the article, but for now, here is the whole Cargo.toml dependencies section:

[dependencies]
wasm-bindgen = "=0.2.65"
serde="1"
yew = { git = "https://github.com/yewstack/yew", features = ["web_sys"], tag = "0.17.2" }
yewtil = { git = "https://github.com/yewstack/yew", features = ["all", "yewtil-macro"], tag = "0.17.2" }

With this, a cargo clean followed again by a ./run.sh will clear all, download and build again the whole dependencies. It will take time, and it is bandwidth consuming (if you are on mobile bridge) but it should work fine with the last branch of the repo.