console.error("renderToReadableStream error"); // Error thrown from here
        console.error(error);

Which error is being thrown?

TypeError: Cannot read properties of undefined (reading 'sort') It seems that the data in

const data = useLoaderData<typeof loader>();

is not sent by Stream.

data.something is sorted in block.

data.something

is

undefined

. In Workers, it resolves to the value of the Promise.

But in functions I got

undefined

. Not sure if this comes from remix side or not.

However, if the functions is similar to workers, it should work. Not sure if WebStreams Api in functions is different?

There's nothing obviously wrong to me there - but I admittedly don't know much about remix

I'd suggest making an issue on the remix repo

Maybe I should create a reproduction of it.

Thank you.

Could it be an old compatibility date and missing stream flags?

If you go to your Pages project > settings > functions, what dates do you see?

Docs: https://developers.cloudflare.com/workers/platform/compatibility-dates/#streams-constructors

I'm reproducing a new repo for the issue. Now it seems to work on Chrome based browsers. But not in Safari. This is weird.

Ah so it’s a client side thing, sorry 😅

Remix does not have an official guide to build an artifact for Pages functions yet.

https://discord.com/channels/595317990191398933/1077741496222097408/1077831324280299540 This is the reason why defer does not work. The Safari (iOS devices) require a minimum amount of data that needs to be loaded before any content is displayed on the page. So to solve the issue, we need to send more data to the initial render to make Safari work properly.

Anyone knows a way to use octokit in Functions (functions does not have --node-compat like workers)?

ts
const octokit = new Octokit({ auth: gitHubToken });

Octokit relies on

crypto

lib.

I tried that once for a project that would commit changes to GH. In the end, I just manually wrote out the commands from the docs.

So the solution is to use

fetch

with

Authorization: Bearer ${token}

right?

That's what I did

Thank you. Hope someone ports octokit to use web crypto instead of crypto.

What are you trying to do? If you are making a commit like I am, I can lend you my code

Thank you so much. I appreciate it.

ts
const url = `https://api.github.com/repos/${owner}/${repo}/contents/${path}`;
const response = await fetch(url, {
      method: "GET",
      headers: {
        Accept: "application/vnd.github+json",
        Authorization: `Bearer ${token}`,
        "X-GitHub-Api-Version": "2022-11-28",
      },
    });

I can use curl with my token to fetch content from a private repo. But when use fetch in Functions, I got Fobidden response.

https://docs.github.com/en/rest/overview/resources-in-the-rest-api?apiVersion=2022-11-28#user-agent-required Found the answer. I have to include User-Agent header.

This might not be possible, but I'm currently looking for a way to modify the footer on all pages with HTMLRewriter, but if I do a root-level

_middleware.ts

, it also runs on GET requests for images and other assets... which causes those assets to fail to be delivered because HTMLRewriter can't rewrite an image.

Is there a way to know if a GET request is for a page only?

You would probably want to

const asset = await next()

, check the headers of

asset

for html

content-type

, and then either run

HTMLRewriter

, or just continue

your Function will still run (and therefore be billed for invocations though)