adapter-cfw: server-side fetch fails due to dependency on Node's util.types

[youngboy]

Describe the bug

1. Use adapter cloudflare workers,
2. Find a route, make sure it turn prerender off, and it is doing fetch on server
3. Open that route in browser directly, it won't work as expect.

(suspect it is about some thing about cfw's runtime have its fetch, and won't work node specific fetch bundle implementation ...)

Logs

website returning 500 code with $error.svelte route, which shows

Cannot read property 'message' of undefined

after fix $error.svelte (the above error is another issue, its hidding the real error)

p.URLSearchParams is not a constructor

TypeError: p.URLSearchParams is not a constructor

then i tried directly modify svelte's dist/ssr.js to avoid this, it keep showing different error xxx is not defined, like types.isAnyArrayBuffer, types.isBoxedPrimitive.

and that's all I dig so far,

To Reproduce

on kit repo

cd examples/svelte-kit-demo

// comment out  prerender, or mark it as false
vim src/routes/blog/index.svelte

pnpm build:cloudflare-workers

// change wrangler.toml's account_id with your cfw account it
vim wrangler.toml

wrangler  dev

open http://127.0.0.1:8787/blog

Expected behavior

example demo directly open /blog should displaying blogs list

Information about your SvelteKit Installation:

System:
OS: macOS 10.15.6
CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
Memory: 287.02 MB / 16.00 GB
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.15.4 - ~/.nvm/versions/node/v14.15.4/bin/node
Yarn: 1.22.10 - /usr/local/bin/yarn
npm: 7.6.2 - ~/.nvm/versions/node/v14.15.4/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
Browsers:
Chrome: 89.0.4389.114
Firefox: 87.0
Safari: 13.1.2
npmPackages:
@sveltejs/kit: workspace:* => 1.0.0-next.74
svelte: ^3.35.0 => 3.35.0

Additional context
Add any other context about the problem here.

[benmccann]

p.URLSearchParams is not a constructor has been fixed but there's still another issue remaining:

util.types.isAnyArrayBuffer and util.types.isBoxedPrimitive are used by node-fetch and are not available in the CFW environment #1020 (comment)

[halfnelson]

I thought this had been fixed by the cloudflare webpack shims, but I was mistaken. My original solution was a more heavy handed platform abstraction #223
But since then, the filesystem read code is no longer needed, and we really only need a proper isomorphic fetch

[youngboy]

tried to use CFW version of fetch https://developers.cloudflare.com/workers/runtime-apis/fetch

export async function load({ fetch: kitFetch }) {
	const fn = typeof fetch === 'function' ? fetch : kitFetch
	const res = await fn('http://127.0.0.1:8787/blog.json');
	return {
		props: {
			posts: await res.json(),
		}
	};
}

but it is getting SyntaxError: Unexpected token e in JSON at position 0 error during res.json()..

PS: It is my first time trying out serverless, I find myself difficult to debug SSR mode in wrangler dev 😥 any suggestion ? thanks in advance...

[youngboy]

tried to use CFW version of fetch https://developers.cloudflare.com/workers/runtime-apis/fetch

export async function load({ fetch: kitFetch }) {
	const fn = typeof fetch === 'function' ? fetch : kitFetch
	const res = await fn('http://127.0.0.1:8787/blog.json');
	return {
		props: {
			posts: await res.json(),
		}
	};
}

but it is getting SyntaxError: Unexpected token e in JSON at position 0 error during res.json()..

PS: It is my first time trying out serverless, I find myself difficult to debug SSR mode in wrangler dev 😥 any suggestion ? thanks in advance...

nvm..... change fetch method, Response class reference in kit/src/runtime/server/page/load_node.js will works fine in CFW adapter.

import { default as nodeFetch, Response as nodeResponse } from 'node-fetch';

const LoadFetch = typeof fetch === 'function' ? fetch : nodeFetch
const LoadResponse = typeof Response !== 'undefined' ? Response : nodeResponse