Partial action failing to render

cknight commented 11 months ago

I'm having some bother with partials. In my app (very WIP), if you navigate to /accessToken and enter a valid Deno Deploy access token, it will forward you to the very simple test.tsx route (/test). This fails. If I comment out the below two lines of code in my _layout.tsx, it successfully works. Without partials, the forwarding and rendering work fine.

(below is only a snippet of _layout.tsx). What is common between both commented out sections (which cause the Partial rendering to fail if uncommented) is the inline checks before rendering. The tab bar in particular is very simple.

        <div class="flex-none">
          {/* {deployUser ? <AvatarMenu deployUser={deployUser} /> : <UnknownAvatarMenu />} */}
        </div>
      </div>

      <div class="px-4 py-4 mx-auto flex flex-col h-screen">
        <div class="flex-grow">
          <div class="mx-auto flex flex-col flex-grow h-full items-center justify-center">
            {/* {tabEnabledPath && <TabBar tab={path} connectionId={connectionId} />} */}
            <ctx.Component />
          </div>
        </div>
      </div>

For example, if I uncomment the tabEnabledPath line, I get this error in the browser console. It suggests I forgot to export my componet (I haven't) or mixed up default or named imports (I don't believe I have). I've also tried both export default function TabBar and export function TabBar with no difference in results.

debug.js:10 Uncaught (in promise) Error: Undefined component passed to createElement()

You likely forgot to export your component or might have mixed up default and named imports<#text tab="test" connectionId="" />

  in #text

    at a.__b (debug.js:10:352)
    at a.__b (hooks.js:2:2247)
    at signals.mjs:2:1140
    at B (preact.mjs:2:4860)
    at ee (preact.mjs:2:1851)
    at ue (preact.mjs:2:8066)
    at B (preact.mjs:2:6870)
    at ee (preact.mjs:2:1851)
    at ue (preact.mjs:2:8066)
    at B (preact.mjs:2:6870)
a.__b @ debug.js:10
a.__b @ hooks.js:2
(anonymous) @ signals.mjs:2
B @ preact.mjs:2
ee @ preact.mjs:2
ue @ preact.mjs:2
B @ preact.mjs:2
ee @ preact.mjs:2
ue @ preact.mjs:2
B @ preact.mjs:2
ee @ preact.mjs:2
ue @ preact.mjs:2
B @ preact.mjs:2
ee @ preact.mjs:2
ue @ preact.mjs:2
B @ preact.mjs:2
ee @ preact.mjs:2
B @ preact.mjs:2
A @ preact.mjs:2
Promise.then (async)
I @ preact.mjs:2
W.setState @ preact.mjs:2
Ctor.setState @ VM94:3980
W.setState @ debug.js:5
applyPartials @ main.ts:844
await in applyPartials (async)
fetchPartials @ main.ts:557
await in fetchPartials (async)
(anonymous) @ main.ts:1087

I've tried to create a simple reproduction from a newly init'd Fresh project. You can find that here: https://github.com/cknight/partial-forward-test. Though this project does roughly similar things, it does actually render the Test route. However, the URL does not update to the /test URL. It remains on the / route.

Any help most appreciated.

mzgajner commented 10 months ago

I can confirm I'm having the same issue.

Was not present in 1.5, is present in 1.6.

My guess is it's somehow related to how the client navigation is handled because:

Even though the issue doesn't happen in 1.5, the manual redirect response actually causes a full-page reload (visible in browser), not a purely client side navigation change.
The issue goes away in 1.6 if I disable client navigation by removing the f-client-nav attribute.

jacobheric commented 10 months ago

I'm having this issue as well. I upgraded from 1.5.2 to 1.6.3 today and I get this error whenever I issue a redirect response from within a route handler. If I remove f-client-nav as @mzgajner suggests the error goes away.

jacobheric commented 8 months ago

I just wanted to follow up here that this issue is a blocker for us to upgrade to 1.6. Although removing partials is a workaround, this is not an option for us as we make wide use of them in our production app.

denoland / fresh

Partial action failing to render #2163