External component breaks fullstack with custom Tokio/Axum

[chungwong]

Problem

Steps To Reproduce
Given two crates and they are using the latest commit 9816b40 (latest or alpha2, doesn't make a difference)

1. A UI lib crate https://github.com/chungwong/rayquaza
2. A consumer crate https://github.com/chungwong/myrust which uses the ui crate

On its own, the ui crate is working good.

❯ git clone https://github.com/chungwong/rayquaza.git
❯ cd rayquaza/crates/ui

❯ dx-9816b40 -V
dioxus 0.6.0-alpha.2 (9816b40)

❯ npm install
❯ npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch

❯ dx-9816b40 serve --example tabs

You will see the the Tab is responsive and its content is changing on http://localhost:8080

---

Let's try to consume the ui crate, and run it as an example.

❯ git clone https://github.com/chungwong/myrust.git

❯ cd myrust
❯ npm install
❯ npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch

❯ dx-9816b40 serve --example tabs

On http://localhost:8080, the tab still works

Issue

❯ cd myrust
❯ dx-9816b40 serve

On http://localhost:3000 (port has to change, it cannot be 8080 anymore, may deserve another issue, it is conflicting with the new asset server which is also on 8080),
you will notice the tab is no longer responive and just broken.

Naturally, one may think the UI crate got problem, is it? Let's test it.
Turn this main on and let's run it again

❯ dx-9816b40 serve

This time, it is http://localhost:8080 again and you will see the tab works again.

The problem is so strange, there is no error, neither in the terminal or the browser side. It looks like it is related to the tokio/axum side but I cannot be sure.

Environment:

• Dioxus version: master@9816b4
• Rust version: 1.80
• OS info: debian 12
• App platform: fullstack

[ealmloff]

The latest version of dx proxies the fullstack server behind the hot reloading server on a port is sends to fullstack. You can use this logic to serve your custom axum router on the port dx passes to fullstack

[chungwong]

The latest version of dx proxies the fullstack server behind the hot reloading server on a port is sends to fullstack. You can use this logic to serve your custom axum router on the port dx passes to fullstack

Originally the reproducilbe was using that logic(copied from my actual repo), but then I removed it to make the demo look succinct.

I believe the proxy shouldn't affect/cause the bug(breaking js/wasm when using external components) as I have tested it again with the logic as it still breaks.

[ealmloff]

Ok I think I figured out what the issue is here. I copied over all of the logic launch uses into your app and it still didn't work. The issue isn't actually related to axum/fullstack at all.

dx is being a bit too smart and noticing you already have the "dioxus/web" feature enabled by default so it doesn't enable your crate's web feature for the client build. You enable it here in your component library: https://github.com/chungwong/rayquaza/blob/main/crates/ui/Cargo.toml#L7

If you are creating a library for dioxus, you should pull in dioxus-lib instead which just includes the core dioxus libraries without any renderers

The reproduction does work when you set the client feature manually when you serve:

dx serve --client-feature web

[chungwong]

Can the situation be detected programmatically? If so, we can issue a warning/suggestion to the user.

[ealmloff]

Yes, I think we could detect this in the CLI

[chungwong]

Ok, let's start with a clean slate.
With the UI crate using

[dependencies]
dioxus-lib = { git = "https://github.com/DioxusLabs/dioxus.git", rev = "b20db13" }
dioxus-html = { git = "https://github.com/DioxusLabs/dioxus.git", rev = "b20db13" }
manganis = { version = "0.3.0-alpha.1" }

The consumer crate(0136fb6) is working as expected. Cool!

New Slate

Ok this is where my whole day was spent on. Somehow, it still breaks when the crates are in a workspace.

Let's get started.

❯ git clone https://github.com/chungwong/rayquaza.git
❯ cd rayquaza/crates
❯ ls 
myrust  ui

There is now a new crate member myrust next to the ui crate. myrust is basically a copy of the original consumer crate but in a workspace. Of course, we need to make ONE change

- ui = { git = "https://github.com/chungwong/rayquaza.git" , rev = "763c722"}
+ ui = { path = "../ui"}

Starting the app

❯ pwd
/home/chung/rayquaza/crates

❯ cd myrust/
❯ npx tailwindcss -i ./input.css -o ./assets/tailwind.css --watch
❯ dx serve

Visit http://localhost:8080 and the tab is broken again.