fix(start): using TextEncoder to encode the chunks when using renderToReadableStream

[SeanCassiere]

Using PR to test out the preview packages on the cf-deployment.

This led to CF deployments just showing a blank screen with this error in the dashboard.

"This ReadableStream did not return bytes."

{
  "truncated": false,
  "outcome": "exception",
  "scriptName": "pages-worker--3280425-production",
  "diagnosticsChannelEvents": [],
  "exceptions": [
    {
      "name": "TypeError",
      "message": "This ReadableStream did not return bytes.",
      "timestamp": 1723290907130
    }
  ],
  "logs": [],
  "eventTimestamp": 1723290907070,
  "event": {
    "request": {
      ...
    },
    "response": {
      "status": 200
    }
  },
  "id": 0
}

CF deployment: https://try-out-the-textencoder-chan.start-basic-cf-pages.pages.dev/

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 753cc2d. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

---

✅ Successfully ran 2 targets

• nx affected --targets=test:eslint,test:unit,test:e2e,test:types,test:build,build --parallel=3
• nx run-many --target=build --exclude=examples/**

---

Sent with 💌 from NxCloud.

[pkg-pr-new]

commit: 753cc2d

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2117

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2117

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2117

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2117

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2117

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2117

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2117

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2117

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2117

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2117

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2117

Open in Stackblitz

More templates

• tanstack-router-react-example-authenticated-routes
• tanstack-router-react-example-basic
• tanstack-router-react-example-basic-default-search-params
• tanstack-router-react-example-basic-file-based
• tanstack-router-react-example-basic-file-based-codesplitting
• tanstack-router-react-example-react-query
• tanstack-router-react-example-basic-react-query-file-based
• tanstack-router-react-example-basic-ssr-file-based
• tanstack-router-react-example-basic-ssr-streaming-file-based
• tanstack-router-react-example-deferred-data
• tanstack-router-react-example-kitchen-sink
• tanstack-router-react-example-kitchen-sink-file-based
• tanstack-router-react-example-kitchen-sink-react-query
• tanstack-router-react-example-kitchen-sink-react-query-file-based
• tanstack-router-react-example-large-file-based
• tanstack-router-react-example-location-masking
• tanstack-router-react-example-navigation-blocking
• tanstack-router-react-example-quickstart
• tanstack-router-react-example-quickstart-file-based
• tanstack-router-react-example-quickstart-rspack-file-based
• tanstack-router-react-example-quickstart-webpack-file-based
• tanstack-router-react-example-scroll-restoration
• tanstack-router-example-react-start-basic
• tanstack-router-example-react-start-basic-counter
• tanstack-router-example-react-start-basic-react-query
• tanstack-router-example-react-start-basic-rsc
• tanstack-router-example-react-start-trello-trellaux
• tanstack-router-example-react-start-basic-trellaux
• tanstack-router-react-example-with-framer-motion
• tanstack-router-react-example-with-trpc
• tanstack-router-react-example-with-trpc-react-query

[SeanCassiere]

Definitely on the right track here:

Now the invariant error UI is being displayed, with the correct HTML being sent down.

Likely something to do with the hydration or reading from the __TSR__ globals are causing this invariant failure.

Server responds correctly

{
  "truncated": false,
  "outcome": "ok",
  "scriptName": "pages-worker--3280425-preview",
  "diagnosticsChannelEvents": [],
  "exceptions": [],
  "logs": [],
  "eventTimestamp": 1723291936977,
  "event": {
    "request": {
      "url": "https://d112c83d.start-basic-cf-pages.pages.dev/",
      "method": "GET",
      "headers": {
        "accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7",
        "accept-encoding": "gzip, br",
        "accept-language": "en-US,en;q=0.9",
        "cf-connecting-ip": "---",
        "cf-ipcountry": "NZ",
        "cf-ray": "8b0fe4ae1bca1c59",
        "cf-visitor": "{\"scheme\":\"https\"}",
        "connection": "Keep-Alive",
        "dnt": "1",
        "host": "d112c83d.start-basic-cf-pages.pages.dev",
        "priority": "u=0, i",
        "sec-ch-ua": "\"Chromium\";v=\"127\", \"Not)A;Brand\";v=\"99\"",
        "sec-ch-ua-mobile": "?0",
        "sec-ch-ua-platform": "\"macOS\"",
        "sec-fetch-dest": "document",
        "sec-fetch-mode": "navigate",
        "sec-fetch-site": "cross-site",
        "sec-fetch-user": "?1",
        "upgrade-insecure-requests": "1",
        "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36",
        "x-forwarded-proto": "https",
        "x-real-ip": "---"
      },
      "cf": {
        "longitude": "---",
        "httpProtocol": "HTTP/3",
        "tlsCipher": "AEAD-AES128-GCM-SHA256",
        "continent": "OC",
        "asn": 9790,
        "clientAcceptEncoding": "gzip, deflate, br, zstd",
        "country": "NZ",
        "verifiedBotCategory": "",
        "tlsClientAuth": {
     },
    "tlsClientHelloLength": "1814",
    "tlsExportedAuthenticator": {

    },
    "tlsVersion": "TLSv1.3",
    "city": "Invercargill",
    "timezone": "Pacific/Auckland",
    "tlsClientExtensionsSha1": "---",
    "region": "Southland",
    "edgeRequestKeepAliveStatus": 1,
    "requestPriority": "",
    "latitude": "---",
    "postalCode": "9810",
    "tlsClientRandom": "---",
    "regionCode": "STL",
    "asOrganization": "2degrees",
    "colo": "AKL",
    "pagesHostName": "d112c83d.start-basic-cf-pages.pages.dev",
    "botManagement": {
      "corporateProxy": false,
      "verifiedBot": false,
      "jsDetection": {
        "passed": false
      },
      "staticResource": false,
      "detectionIds": {},
      "score": 99
    }
  }
},
"response": {
  "status": 200
}

},

"id": 0

}

[SeanCassiere]

Currently on "cf-pages" deployments, two known errors do exist.

• On the client, hydration fails because of the invariant error being thrown.
  • We however do know that React is working, since the invariant error is being displayed using the default TSR <ErrorComponent> with the button successfully toggling the React.useState boolean for the "open" state.
• Loading the /posts route fails, because the routeTree has an error listed in the server output logs.
  • "Error: Context is not available"