Redirect inside server action: `Invalid element: root`

[dswbx]

When using unstable_redirect inside a server action I'll get this error:

Error: Invalid element: root
    at Slot (file:///Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/waku/dist/minimal/client.js:224:15)
    at react-stack-bottom-frame (/Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/react-dom/cjs/react-dom-server.edge.development.js:9251:18)
    at renderWithHooks (/Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4898:19)
    at renderElement (/Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/react-dom/cjs/react-dom-server.edge.development.js:5333:23)
    at retryNode (/Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6092:31)
    at performWork (/Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/react-dom/cjs/react-dom-server.edge.development.js:6936:17)
    at /Users/dennis/Projects/tmp/waku/waku-server-action-redirect/node_modules/react-dom/cjs/react-dom-server.edge.development.js:4573:22
    at node:internal/process/task_queues:151:7
    at AsyncResource.runInAsyncScope (node:async_hooks:214:14)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:148:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)

This is the code:

import { unstable_redirect } from "waku/router/server";

export default async function HomePage() {
  return (
    <form
      action={async () => {
        "use server";
        unstable_redirect("/about");
      }}
    >
      <button type="submit">
        Redirect to About Page
      </button>
    </form>
  );
}

I'm not an expert on server actions, but looking at the Next.js docs, it should be possible to redirect. Redirecting inside a server component (lingo is confusing lol, so apologize if I got it wrong) works though.

[dai-shi]

Thanks for reporting this.
I need to look into it closely.
I have a lot of tasks piled up, so it may take some time before I can tackle it.
In the meantime, feel free to dig into it if anyone is interested.

[dswbx]

@dai-shi I tried to have a look but I must admin that I don't know enough about how RSC works. Could you give some hints where to look at? I think I understand how the redirect works for SSR routes:

waku/packages/waku/src/lib/middleware/handler.ts

Lines 165 to 174 in dcbdc53

	const info = getErrorInfo(e);
	if (info?.status !== 404) {
	ctx.res.status = info?.status || 500;
	ctx.res.body = stringToStream(
	(e as { message?: string } | undefined)?.message || String(e),
	);
	if (info?.location) {
	(ctx.res.headers ||= {}).location = info.location;
	}
	}

However, the thrown custom redirect error doesn't bubble up when thrown inside a server action. Any advice?

[dai-shi]

I must admin that I don't know enough about how RSC works.

Don't worry. I understand. It also requires to understand how Waku works. Let's take time.

However, the thrown custom redirect error doesn't bubble up when thrown inside a server action. Any advice?

It's a client redirect. So, Redirect in router/client.ts should do the job.

The error "Invalid element: root" is unexpected to me, because I expect "root element" is cached on the client. I would look into that why the root element is gone (I think it's undefined and causes the error.)

[dai-shi]

Sorry, this is a tough one. I'll take it.