Reading with CreateGitHubReader throws an error when used with cloudflare workers and opennextjs
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!
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.