Skip to content

Hydration Bug with Upload and Button Component #394

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
Open
tomellm opened this issue Apr 4, 2025 · 2 comments
Open

Hydration Bug with Upload and Button Component #394

tomellm opened this issue Apr 4, 2025 · 2 comments

Comments

@tomellm
Copy link

tomellm commented Apr 4, 2025 •
edited
Loading

I really love the File Upload Component as it is shown on the example Website but when I try to use it locally with ssr and hydrate a hydration bug keeps apprearing related to the input tag (as shown in the image at the bottom).

I have tried simplifying my App to the bare minimum but even just the code on the website causes the Bug:

<Upload>
    <Button>
        "upload"
    </Button>
</Upload>

I have made sure to have all of the basic things needed for using thaw with ssr, specifically

  • using the SSRMountStyleProvider
  • using the ConfigProvider
  • activating the ssr and hydrate features when my app has those features active
[dependencies]
leptos = { version = "0.7.0" }
leptos_router = { version = "0.7.0" }
axum = { version = "0.7", optional = true }
leptos_axum = { version = "0.7.0", optional = true }
// -- a few more crates, I can add them if needed
thaw = { git = "https://github.com/thaw-ui/thaw.git", branch="main" }

[features]
hydrate = [
    "leptos/hydrate",
    "thaw/hydrate",
     // -- more things
]
ssr = [
    "leptos/ssr",
    "leptos_meta/ssr",
    "leptos_router/ssr",
    "thaw/ssr",
    "dep:axum",
    "dep:tokio",
    "dep:leptos_axum",
]

Please tell me if there is any info I can provide that I may have forgotten, I would also be happy to try to implement a fix myself given some pointers as this is my first interaction with this codebase.

Thanks in advance for any help

Image
@lizidev
Copy link
Collaborator

lizidev commented Apr 16, 2025

Sorry for the late reply!

Can you provide more code of your website. For example, the parent component of Upload.

<???>
  <Upload>
      <Button>
          "upload"
      </Button>
  </Upload>
</???>

@tomellm
Copy link
Author

tomellm commented May 11, 2025

Welll..... I guess the same goes for me xD completly forgot about this, thanks for keeping it open ;)

So the page is really simple as it is only supposed to be a proof of concept. Here is the HomePage component:

<div class="absolute top-0 left-0">
    <Upload
        custom_request
        multiple=false>
        <Button>"Upload File"</Button>
    </ Upload>
</div>
<div class="w-screen h-screen flex items-center justify-center">
    <img
        class="max-w-full max-h-full"
        node_ref=img_ref
    />
</div>

Which itself is wrapped inside the rest of the app: (This is the whole think there is no more component code)

<SSRMountStyleProvider>
    <!DOCTYPE html>
    <html lang="en">
        <head>
            <meta charset="utf-8"/>
            <meta name="viewport" content="width=device-width, initial-scale=1"/>
            <AutoReload options=options.clone() />
            <HydrationScripts options/>
            <MetaTags/>
        </head>
        <body>
            <ConfigProvider>
                <Stylesheet id="leptos" href="/pkg/web_app.css"/>
        
                // sets the document title
                <Title text="Welcome to the Asciifier"/>
        
                // content for this welcome page
                <Router>
                    <main>
                        <Routes fallback=|| "Page not found.".into_view()>
                            <Route path=StaticSegment("") view=HomePage/>
                        </Routes>
                    </main>
                </Router>
            </ConfigProvider>
        </body>
    </html>
</SSRMountStyleProvider>

Also, in case its needed, this is the rest of the code inside of the HomePage Component:

let (files, set_files) = signal_local::<Option<web_sys::FileList>>(None);
let (image_status, set_image_status) = signal(Asciification::UnInit);
let img_ref = NodeRef::<Img>::new();

let asciify_image = Action::new_local(move |_: &()| async move {
    // code ...
});

let custom_request = move |file_list: web_sys::FileList| {
    set_files.set(Some(file_list));
    asciify_image.dispatch(());
};

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

No branches or pull requests
2 participants
@lizidev @tomellm