leptos-rs / leptos

Build fast web applications with Rust.
https://leptos.dev
MIT License
16.34k stars 653 forks source link

thread 'actix-rt|system:0|arbiter:1' has overflowed its stack #336

Closed tqwewe closed 1 year ago

tqwewe commented 1 year ago

I created a new leptos project, and added some HTML, and stragely I get this error:

thread 'actix-rt|system:0|arbiter:1' has overflowed its stack
fatal runtime error: stack overflow

It seems like its when I have too much HTML for some reason?

The <li></li> here causes the error, and when you comment it out, the error goes away.

<ul
  class="pf-c-dropdown__menu pf-m-align-right"
  aria-labelledby="dashboard-demo-masthead-settings-button"
  hidden
>
    // vvvvvv Try commenting this li out, and the error goes away
    <li></li>
</ul>
View full app.rs file ```rust use leptos::*; use leptos_meta::*; use leptos_router::*; #[component] pub fn App(cx: Scope) -> impl IntoView { // Provides context that manages stylesheets, titles, meta tags, etc. provide_meta_context(cx); view! { cx, // injects a stylesheet into the document // id=leptos means cargo-leptos will hot-reload this stylesheet // sets the document title // content for this welcome page <Router> <Routes> <Route path="" view=|cx| view! { cx, <HomePage/> }/> </Routes> </Router> } } /// Renders the home page of your application. #[component] fn HomePage(cx: Scope) -> impl IntoView { view! { cx, <div class="pf-c-page" id="dashboard-demo"> <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-dashboard-demo" > "Skip to content" </a> <header class="pf-c-masthead" id="dashboard-demo-masthead"> <span class="pf-c-masthead__toggle"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Global navigation" > <i class="fas fa-bars" aria-hidden="true"></i> </button> </span> <div class="pf-c-masthead__main"> <a class="pf-c-masthead__brand" href="#"> <picture class="pf-c-brand pf-m-picture" style=" --pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px; " > <source media="(min-width: 768px)" srcset="/assets/images/logo__pf--reverse-on-md.svg" /> <source srcset="/assets/images/logo__pf--reverse--base.svg" /> <img src="/assets/images/logo__pf--reverse--base.png" alt="Fallback patternFly default logo" /> </picture> </a> </div> <div class="pf-c-masthead__content"> <div class="pf-c-toolbar pf-m-full-height pf-m-static" id="dashboard-demo-masthead-toolbar" > <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md" > <div class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg" > <div class="pf-c-toolbar__item"> <nav class="pf-c-app-launcher" aria-label="Application launcher" id="dashboard-demo-masthead-application-launcher" > <button class="pf-c-app-launcher__toggle" type="button" id="dashboard-demo-masthead-application-launcher-button" aria-expanded="false" aria-label="Application launcher" > <i class="fas fa-th" aria-hidden="true"></i> </button> </nav> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" id="dashboard-demo-masthead-settings-button" aria-expanded="false" type="button" aria-label="Settings" > <i class="fas fa-cog" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="dashboard-demo-masthead-settings-button" hidden > // vvvvvv Try commenting this li out, and the error goes away <li></li> </ul> </div> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" id="dashboard-demo-masthead-help-button" aria-expanded="false" type="button" aria-label="Help" > <i class="fas fa-question-circle" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="dashboard-demo-masthead-help-button" hidden > <li> <button class="pf-c-dropdown__menu-item" type="button"> "Support options" </button> </li> <li> <button class="pf-c-dropdown__menu-item" type="button"> "Open support case" </button> </li> <li> <button class="pf-c-dropdown__menu-item" type="button"> "API documentation" </button> </li> </ul> </div> </div> </div> <div class="pf-c-toolbar__item pf-m-hidden-on-lg"> <div class="pf-c-dropdown"> <button class="pf-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Actions" > <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden> <div class="pf-c-menu__content"> <section class="pf-c-menu__group pf-m-hidden-on-sm"> <ul class="pf-c-menu__list" role="menu"> <li class="pf-c-menu__list-item pf-m-disabled" role="none" > <button class="pf-c-menu__item" type="button" disabled role="menuitem" > <span class="pf-c-menu__item-description"> <div class="pf-u-font-size-sm">"Username:"</div> <div class="pf-u-font-size-md"> "ned_username" </div> </span> </button> </li> <li class="pf-c-menu__list-item pf-m-disabled" role="none" > <button class="pf-c-menu__item" type="button" disabled role="menuitem" > <span class="pf-c-menu__item-description"> <div class="pf-u-font-size-sm"> "Account number:" </div> <div class="pf-u-font-size-md">"123456789"</div> </span> </button> </li> <li class="pf-c-divider" role="separator"></li> <li class="pf-c-menu__list-item" role="none"> <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "My profile" </span> </span> </button> </li> <li class="pf-c-menu__list-item" role="none"> <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "User management" </span> </span> </button> </li> <li class="pf-c-menu__list-item" role="none"> <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text" >"Logout"</span > </span> </button> </li> </ul> </section> <hr class="pf-c-divider pf-m-hidden-on-sm" /> <section class="pf-c-menu__group"> <ul class="pf-c-menu__list" role="menu"> <li class="pf-c-menu__list-item" role="none"> <button class="pf-c-menu__item" type="button" role="menuitem" aria-expanded="false" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-icon"> <i class="fas fa-fw fa-cog" aria-hidden="true" ></i> </span> <span class="pf-c-menu__item-text"> "Settings" </span> <span class="pf-c-menu__item-toggle-icon"> <i class="fas fa-angle-right"></i> </span> </span> </button> <div class="pf-c-menu" hidden> <div class="pf-c-menu__content"> <ul class="pf-c-menu__list" role="menu"> <li class="pf-c-menu__list-item pf-m-drill-up" role="none" > <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-toggle-icon" > <i class="fas fa-angle-left"></i> </span> <span class="pf-c-menu__item-icon"> <i class="fas fa-fw fa-cog" aria-hidden="true" ></i> </span> <span class="pf-c-menu__item-text"> "Settings" </span> </span> </button> </li> <li class="pf-c-divider" role="separator" ></li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Customer support" </span> </span> </a> </li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "About" </span> </span> </a> </li> </ul> </div> </div> </li> <li class="pf-c-menu__list-item" role="none"> <button class="pf-c-menu__item" type="button" role="menuitem" aria-expanded="false" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-icon"> <i class="fas fa-fw fa-pf-icon pf-icon-help" aria-hidden="true" ></i> </span> <span class="pf-c-menu__item-text">"Help"</span> <span class="pf-c-menu__item-toggle-icon"> <i class="fas fa-angle-right"></i> </span> </span> </button> <div class="pf-c-menu" hidden> <div class="pf-c-menu__content"> <ul class="pf-c-menu__list" role="menu"> <li class="pf-c-menu__list-item pf-m-drill-up" role="none" > <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-toggle-icon" > <i class="fas fa-angle-left"></i> </span> <span class="pf-c-menu__item-icon"> <i class="fas fa-fw fa-pf-icon pf-icon-help" aria-hidden="true" ></i> </span> <span class="pf-c-menu__item-text"> "Help" </span> </span> </button> </li> <li class="pf-c-divider" role="separator" ></li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Support options" </span> </span> </a> </li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Open support case" </span> </span> </a> </li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "API documentation" </span> </span> </a> </li> </ul> </div> </div> </li> <li class="pf-c-menu__list-item" role="none"> <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-icon"> <i class="fas fa-fw fa-th" aria-hidden="true" ></i> </span> <span class="pf-c-menu__item-text"> "Application launcher" </span> <span class="pf-c-menu__item-toggle-icon"> <i class="fas fa-angle-right"></i> </span> </span> </button> <div class="pf-c-menu" hidden> <div class="pf-c-menu__header"> <button class="pf-c-menu__item" type="button" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-toggle-icon"> <i class="fas fa-angle-left"></i> </span> <span class="pf-c-menu__item-icon"> <i class="fas fa-fw fa-th" aria-hidden="true" ></i> </span> <span class="pf-c-menu__item-text"> "Application launcher" </span> </span> </button> </div> <div class="pf-c-menu__search"> <div class="pf-c-menu__search-input"> <div class="pf-c-search-input"> <div class="pf-c-search-input__bar"> <span class="pf-c-search-input__text"> <span class="pf-c-search-input__icon"> <i class="fas fa-search fa-fw" aria-hidden="true" ></i> </span> <input class="pf-c-search-input__text-input" type="text" placeholder="Search" aria-label="Search" /> </span> </div> </div> </div> </div> <hr class="pf-c-divider" /> <section class="pf-c-menu__group"> <h1 class="pf-c-menu__group-title"> "Favorites" </h1> <ul class="pf-c-menu__list" role="menu"> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Link 1" </span> </span> </a> <button class="pf-c-menu__item-action pf-m-favorite pf-m-favorited" type="button" aria-label="Starred" > <span class="pf-c-menu__item-action-icon"> <i class="fas fa-star" aria-hidden="true" ></i> </span> </button> </li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" target="_blank" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Link 2" </span> <span class="pf-c-menu__item-external-icon" > <i class="fas fa-external-link-alt" aria-hidden="true" ></i> </span> <span class="pf-screen-reader"> "(opens new window)" </span> </span> </a> <button class="pf-c-menu__item-action pf-m-favorite" type="button" aria-label="Not starred" > <span class="pf-c-menu__item-action-icon"> <i class="fas fa-star" aria-hidden="true" ></i> </span> </button> </li> </ul> </section> <hr class="pf-c-divider" /> <section class="pf-c-menu__group"> <h1 class="pf-c-menu__group-title"> "Group 1" </h1> <ul class="pf-c-menu__list" role="menu"> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Link 1" </span> </span> </a> <button class="pf-c-menu__item-action pf-m-favorite" type="button" aria-label="Not starred" > <span class="pf-c-menu__item-action-icon"> <i class="fas fa-star" aria-hidden="true" ></i> </span> </button> </li> <li class="pf-c-menu__list-item" role="none"> <a class="pf-c-menu__item" href="#" role="menuitem" target="_blank" > <span class="pf-c-menu__item-main"> <span class="pf-c-menu__item-text"> "Link 2" </span> <span class="pf-c-menu__item-external-icon" > <i class="fas fa-external-link-alt" aria-hidden="true" ></i> </span> <span class="pf-screen-reader"> "(opens new window)" </span> </span> </a> <button class="pf-c-menu__item-action pf-m-favorite pf-m-favorited" type="button" aria-label="Starred" > <span class="pf-c-menu__item-action-icon"> <i class="fas fa-star" aria-hidden="true" ></i> </span> </button> </li> </ul> </section> </div> </li> </ul> </section> </div> </div> </div> </div> </div> </div> </div> </div> </div> </header> </div> // <h1>"Welcome to Leptos!"</h1> // <button on:click=on_click>"Click Me: " {count}</button> } } ``` </details> <hr /> <p>Edit:</p> <p>The simple fix in my case was:</p> <ol> <li>Set <code>RUST_MIN_STACK</code> to a higher value (eg: <code>"33554432"</code>)</li> <li>Add the following to <code>Cargo.toml</code> <pre><code class="language-toml">[profile.dev] opt-level = 1 incremental = true</code></pre></li> </ol> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tqwewe"><img src="https://avatars.githubusercontent.com/u/16362377?v=4" />tqwewe</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>It seems like it really is just too much HTML causing this. If you comment out single thing really, then it works</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tqwewe"><img src="https://avatars.githubusercontent.com/u/16362377?v=4" />tqwewe</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Aditionally, when I try to add even more HTML, I get this error:</p> <pre><code>❯ cargo leptos watch Compiling leptos_start v0.1.0 (/Users/ari/dev/thalo-rs/thalo-web-leptos) Finished dev [unoptimized + debuginfo] target(s) in 2m 23s Cargo finished cargo build --package=leptos_start --lib --target-dir=target/front --target=wasm32-unknown-unknown --no-default-features --features=hydrate Error: at `/Users/ari/.cargo/registry/src/github.com-1ecc6299db9ec823/cargo-leptos-0.1.3/src/compile/front.rs:40:30` Caused by: 0: at `/Users/ari/.cargo/registry/src/github.com-1ecc6299db9ec823/cargo-leptos-0.1.3/src/compile/front.rs:107:10` 1: failed getting Wasm module for 'target/front/wasm32-unknown-unknown/debug/leptos_start.wasm' 2: failed to parse input as wasm 3: failed to parse code section 4: locals exceed maximum (at offset 899821)</code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gbj"><img src="https://avatars.githubusercontent.com/u/286622?v=4" />gbj</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>If you break some of that out into separate components, does it resolve the issue or does it still overflow?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/tqwewe"><img src="https://avatars.githubusercontent.com/u/16362377?v=4" />tqwewe</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@gbj it seems like moving it into a separate function/component still results in the error, regardless of if the separated component is in another file, or the same file.</p> <p>A temporary solution for this specific error is to set the env var <code>RUST_MIN_STACK = "33554432"</code>. But after doing this, I get the other <code>locals exceed maximum</code> error as mentioned before.</p> <p>Edit:</p> <p>To fix the <code>locals exceed maximum</code> error, you can add:</p> <pre><code class="language-toml">[profile.dev] opt-level = 1 incremental = true</code></pre> <p>To your cargo.toml to solve this, as it optimizes away a lot of the local variables created by the <code>view!</code> macro.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/gbj"><img src="https://avatars.githubusercontent.com/u/286622?v=4" />gbj</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Okay, thanks. This optimization is interesting! A few contributors and I were discussing this in the Discord and it's pretty clear what's happening here, although it would mean a deopt for SSR in general to fix it, which is sad. Basically we use <code>SmallVec</code> to avoid heap allocations when the numbers of attributes/children are small; because you have a fairly large number of very small elements, in never allocates on the heap (yay!) but instead overflows the stack (boo!) while trying to render.</p> <p>It looks like increasing the stack size will at least unblock you for now. The longer-term solution is an optimization to SSR for the view macro that I'm working on reintroducing that would basically convert your entire component there into a single static HTML string. So I think I'll leave this open for now, not switch away from <code>SmallVec</code>, and keep working on the SSR optimization as the actual solution.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>