adapter-vercel: ReferenceError when using fetch in hooks.js

[geoffrich]

Describe the bug

Referencing fetch at the top level of hooks.js throws a ReferenceError: fetch is not defined on every Serverless function invocation when deployed to Vercel. This only happens when deployed, and not when running locally with svelte-kit dev or svelte-kit preview.

Reproduction

See my example repo. This is the SvelteKit demo app with a console.log(fetch) added in the root of hooks.js. Server-rendering a page (e.g. /todos) shows the below error page when deployed to Vercel.

Logs

2022-01-14T16:54:52.301Z	undefined	ERROR	ReferenceError: fetch is not defined    at Object.<anonymous> (/var/task/index.js:7489:13)    at Module._compile (internal/modules/cjs/loader.js:1085:14)    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)    at Module.load (internal/modules/cjs/loader.js:950:32)    at Function.Module._load (internal/modules/cjs/loader.js:790:12)    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:192:29)    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)    at async Loader.import (internal/modules/esm/loader.js:178:24)    at async getListener (/var/task/___vc/__launcher.js:33:11)2022-01-14T16:54:52.816Z	undefined	ERROR	ReferenceError: fetch is not defined    at Object.<anonymous> (/var/task/index.js:7489:13)    at Module._compile (internal/modules/cjs/loader.js:1085:14)    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)    at Module.load (internal/modules/cjs/loader.js:950:32)    at Function.Module._load (internal/modules/cjs/loader.js:790:12)    at ModuleWrap.<anonymous> (internal/modules/esm/translators.js:192:29)    at ModuleJob.run (internal/modules/esm/module_job.js:183:25)    at async Loader.import (internal/modules/esm/loader.js:178:24)    at async getListener (/var/task/___vc/__launcher.js:33:11)RequestId: 1c05fa3b-cc92-414a-b7d7-8c29b9f007bf Error: Runtime exited with error: exit status 1Runtime.ExitError

System Info

System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 8.75 GB / 12.40 GB
    Container: Yes
    Shell: 5.8 - /usr/bin/zsh
  Binaries:
    Node: 14.17.0 - /usr/bin/node
    Yarn: 1.22.10 - /usr/bin/yarn
    npm: 8.1.1 - /usr/bin/npm
  Browsers:
    Chrome: 90.0.4430.212
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.10 
    @sveltejs/adapter-vercel: ^1.0.0-next.36 => 1.0.0-next.36 
    @sveltejs/kit: next => 1.0.0-next.229 
    svelte: ^3.44.0 => 3.46.1

Severity

blocking an upgrade

Additional Information

This issue first presented with adapter-vercel, but I suspect it could be an issue with the other adapters as well.

I think the issue is that fetch is not polyfilled until after the App is imported, at which point it's too late.

kit/packages/adapter-vercel/files/entry.js

Lines 1 to 6 in 9de8094

	import { __fetch_polyfill } from '@sveltejs/kit/install-fetch';
	import { getRawBody } from '@sveltejs/kit/node';
	import { App } from 'APP';
	import { manifest } from 'MANIFEST';
	__fetch_polyfill();

This issue came up when updating svelte.dev to latest SvelteKit. hooks.js imports a file that imports $lib/db/client, which references fetch as part of an export.

[egoist]

what about using @rollup/plugin-inject to inject fetch when it's actually used? https://github.com/rollup/plugins/tree/master/packages/inject