keystatic icon indicating copy to clipboard operation
keystatic copied to clipboard

Reading with CreateGitHubReader throws an error when used with cloudflare workers and opennextjs

Open SomewhatMay opened this issue 5 months ago • 1 comments

I am trying to get Keystatic to work with NextJS 15 and Cloudflare Workers. I am using @opennextjs/cloudflare with wrangler to build and preview the NextJS project.

I initially faced issues using createReader with this setup, as Cloudflare does not provide a NodeJS runtime, and thus Keystatic cannot use fs.readdir. I decided to give createGitHubReader a try, and it seems to work when I build using next on my local computer. However, the moment I build with OpenNextJS and Wrangler, I get the following error:

[wrangler:info] Ready on http://localhost:8787
✘ [ERROR] ⨯ Error: Failed to fetch tree: 403

  Request forbidden by administrative rules. Please make sure your request has a User-Agent header
  (https://docs.github.com/en/rest/overview/resources-in-the-rest-api#user-agent-required). Check
  https://developer.github.com for other possible causes.

      at <unknown> (home/may/github/keycloud-test/.wrangler/tmp/dev-3tx9mz/worker.js:120919:33)
      at async Object.readdir
  (home/may/github/keycloud-test/.wrangler/tmp/dev-3tx9mz/worker.js:120926:34)
      at async (home/may/github/keycloud-test/.wrangler/tmp/dev-3tx9mz/worker.js:120772:36)
      at async Object.all
  (home/may/github/keycloud-test/.wrangler/tmp/dev-3tx9mz/worker.js:120947:26)
      at async e0 (home/may/github/keycloud-test/.wrangler/tmp/dev-3tx9mz/worker.js:120966:20) {
    digest: '2158234799'
  }


[wrangler:info] GET / 500 Internal Server Error (247ms)
[wrangler:info] GET /_next/static/media/569ce4b8f30dc480-s.p.woff2 200 OK (8ms)
[wrangler:info] GET /_next/static/media/93f479601ee12b01-s.p.woff2 200 OK (9ms)
[wrangler:info] GET /_next/static/css/2f09ee4bcfbd68d2.css 200 OK (6ms)
[wrangler:info] GET /_next/static/chunks/webpack-4724778daf11f9b8.js 200 OK (6ms)
[wrangler:info] GET /_next/static/chunks/a82cbd8b-905848c57f09fa04.js 200 OK (9ms)
[wrangler:info] GET /_next/static/chunks/261-1f415f0c8a72ebeb.js 200 OK (10ms)
[wrangler:info] GET /_next/static/chunks/main-app-06f8caf647978cd0.js 200 OK (17ms)
[wrangler:info] GET /_next/static/css/2f09ee4bcfbd68d2.css 304 Not Modified (4ms)
[wrangler:info] GET /favicon.ico 200 OK (3ms)
[wrangler:info] GET /favicon.ico 304 Not Modified (2ms)

Note that this error does not appear if I merely create the reader; it only appears when I use it to read a collection or a singleton. Clearly, the request that Keystatic is making to GitHub lacks a user-agent header, and after looking through the documentation and prior issues, I cannot find any way to add a user-agent header myself. Any help is much appreciated!

SomewhatMay avatar Jul 28 '25 16:07 SomewhatMay

To get this to work properly, I had to override the fetch method to include a user agent.

const originalFetch = globalThis.fetch;
globalThis.fetch = (url, init) => {
  const headers = new Headers(init?.headers);
  if (!headers.has("User-Agent")) {
    headers.set("User-Agent", "MyApp/1.0.0");
  }

  return originalFetch(url, {
    ...init,
    headers,
  });
};

This is definitely a hacky solution and should not be a final solution to this issue.

SomewhatMay avatar Jul 28 '25 23:07 SomewhatMay