Streaming SSR involving Suspense & streaming ReadableStream: chunks arrive before route info, erroring

[phryneas]

Which project does this relate to?

Start

Describe the bug

This is a bug with Router/Start streaming SSR when

• the route component suspends
• the loader returns a ReadableStream
• the stream has a fast first chunk

Under these circumstances, the generated HTML is out of order, containing these three <script tags in this order:

    <script class="tsr-once ">__TSR__.initMatch({ "index": 0, "__beforeLoadContext": "{}", "loaderData": "{\"$undefined\":0}", "extracted": {} })
        console.info(`Injected From Server:
__TSR__.initMatch({"index":0,"__beforeLoadContext":"{}","loaderData":"{\\"$undefined\\":0}","extracted":{}})`)
        if (typeof __TSR__ !== "undefined") __TSR__.cleanScripts()</script>

    <script
        class='tsr-once'>__TSR__.matches[1].extracted[1].value.controller.enqueue(new TextEncoder().encode("this is too soon!")); console.info(`Injected From Server:
__TSR__.matches[1].extracted[1].value.controller.enqueue(new TextEncoder().encode("this is too soon!"))`); if (typeof __TSR__ !== 'undefined') __TSR__.cleanScripts()</script>

    <div hidden id="S:0"><template id="P:1"></template>
        <script class="tsr-once ">__TSR__.initMatch({ "index": 1, "__beforeLoadContext": "{\"delayed\":{\"$undefined\":0},\"nested\":{\"$undefined\":0}}", "loaderData": "{\"delayed\":{\"status\":\"pending\"},\"nested\":{\"stream\":{}}}", "extracted": { "0": { "type": "promise", "path": ["delayed"] }, "1": { "type": "stream", "path": ["nested", "stream"] } } })
            console.info(`Injected From Server:
__TSR__.initMatch({"index":1,"__beforeLoadContext":"{\\"delayed\\":{\\"$undefined\\":0},\\"nested\\":{\\"$undefined\\":0}}","loaderData":"{\\"delayed\\":{\\"status\\":\\"pending\\"},\\"nested\\":{\\"stream\\":{}}}","extracted":{"0":{"type":"promise","path":["delayed"]},"1":{"type":"stream","path":["nested","stream"]}}})`)
            if (typeof __TSR__ !== "undefined") __TSR__.cleanScripts()</script>
        <div class="tsr-once"><!--$?--><template id="B:2"></template><!--/$--></div>
        <div class="tsr-once"><!--$?--><template id="B:3"></template><!--/$--></div>
    </div>

Note that the second script tag tries to access __TSR__.matches[1].extracted[1] - the problem here is that __TSR__.matches[1] will only be initialized as a result of the third script tag, so a Uncaught TypeError: __TSR__.matches[1] is undefined error is thrown.

Your Example Website or App

https://stackblitz.com/~/github.com/phryneas/reproduction-tanstack-router-chunk-stream-order-bug?file=app/routes/index.tsx

Steps to Reproduce the Bug or Issue

Open the console and see the bug.

Expected behavior

The chunk should arrive after the controller is initialized in the browser.

Screenshots or Videos

No response

Platform

• OS: irrelevant
• Browser: irrelevant
• Version: 1.95.1

Additional context

No response