fix: Use esbuild inject API

Author: GrygrFlzr

.changeset/ninety-games-flow.md

@@ -0,0 +1,8 @@
+---
+'@sveltejs/adapter-netlify': patch
+'@sveltejs/adapter-node': patch
+'@sveltejs/adapter-vercel': patch
+'@sveltejs/kit': patch
+---
+
+Use esbuild inject API to insert shims

packages/adapter-netlify/files/entry.js

@@ -1,5 +1,3 @@
-import '@sveltejs/kit/install-fetch'; // eslint-disable-line import/no-unresolved
-
 // TODO hardcoding the relative location makes this brittle
 import { init, render } from '../output/server/app.js'; // eslint-disable-line import/no-unresolved
 

packages/adapter-netlify/files/shims.js

@@ -0,0 +1 @@
+export { fetch, Response, Request, Headers } from '@sveltejs/kit/install-fetch'; // eslint-disable-line import/no-unresolved

packages/adapter-netlify/index.js

@@ -24,6 +24,7 @@ export default function () {
 				entryPoints: ['.svelte-kit/netlify/entry.js'],
 				outfile: join(functions, 'render/index.js'),
 				bundle: true,
+				inject: [join(files, 'shims.js')],
 				platform: 'node'
 			});
 

packages/adapter-node/index.js

@@ -63,6 +63,7 @@ export default function ({
 				format: 'esm',
 				platform: 'node',
 				target: 'node12',
+				inject: [join(files, 'shims.js')],
 				define: {
 					esbuild_app_dir: '"' + config.kit.appDir + '"'
 				}

packages/adapter-node/rollup.config.js

@@ -2,13 +2,23 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import commonjs from '@rollup/plugin-commonjs';
 import json from '@rollup/plugin-json';
 
-export default {
-	input: 'src/index.js',
-	output: {
-		file: 'files/index.js',
-		format: 'esm',
-		sourcemap: true
+export default [
+	{
+		input: 'src/index.js',
+		output: {
+			file: 'files/index.js',
+			format: 'esm',
+			sourcemap: true
+		},
+		plugins: [nodeResolve(), commonjs(), json()],
+		external: ['../output/server/app.js', './env.js', ...require('module').builtinModules]
 	},
-	plugins: [nodeResolve(), commonjs(), json()],
-	external: ['../output/server/app.js', './env.js', ...require('module').builtinModules]
-};
+	{
+		input: 'src/shims.js',
+		output: {
+			file: 'files/shims.js',
+			format: 'esm'
+		},
+		external: ['module']
+	}
+];

packages/adapter-node/src/index.js

@@ -1,4 +1,3 @@
-import './require_shim';
 import { createServer } from './server';
 // TODO hardcoding the relative location makes this brittle
 import { init, render } from '../output/server/app.js'; // eslint-disable-line import/no-unresolved

packages/adapter-node/src/require_shim.js

@@ -1,4 +1,3 @@
-import '@sveltejs/kit/install-fetch'; // eslint-disable-line import/no-unresolved
 import { getRawBody } from '@sveltejs/kit/node'; // eslint-disable-line import/no-unresolved
 import compression from 'compression';
 import fs from 'fs';

packages/adapter-node/src/server.js

@@ -0,0 +1,9 @@
+import { createRequire } from 'module';
+export { fetch, Response, Request, Headers } from '@sveltejs/kit/install-fetch'; // eslint-disable-line import/no-unresolved
+
+// esbuild automatically renames "require"
+// So we still have to use Object.defineProperty here
+Object.defineProperty(globalThis, 'require', {
+	enumerable: true,
+	value: createRequire(import.meta.url)
+});

packages/adapter-node/src/shims.js

@@ -1,5 +1,4 @@
 import { getRawBody } from '@sveltejs/kit/node'; // eslint-disable-line import/no-unresolved
-import '@sveltejs/kit/install-fetch'; // eslint-disable-line import/no-unresolved
 
 // TODO hardcoding the relative location makes this brittle
 import { init, render } from '../output/server/app.js'; // eslint-disable-line import/no-unresolved

packages/adapter-vercel/files/entry.js

@@ -0,0 +1 @@
+export { fetch, Response, Request, Headers } from '@sveltejs/kit/install-fetch'; // eslint-disable-line import/no-unresolved

packages/adapter-vercel/files/shims.js

@@ -31,6 +31,7 @@ export default function () {
 				entryPoints: ['.svelte-kit/vercel/entry.js'],
 				outfile: join(dirs.lambda, 'index.js'),
 				bundle: true,
+				inject: [join(files, 'shims.js')],
 				platform: 'node'
 			});
 

packages/adapter-vercel/index.js

@@ -2,7 +2,7 @@ import { readFileSync, writeFileSync } from 'fs';
 import { dirname, join, resolve as resolve_path } from 'path';
 import { parse, pathToFileURL, resolve } from 'url';
 import { mkdirp } from '../filesystem/index.js';
-import '../../install-fetch.js';
+import { __fetch_polyfill } from '../../install-fetch.js';
 import { SVELTE_KIT } from '../constants.js';
 
 /** @param {string} html */
@@ -58,6 +58,8 @@ const REDIRECT = 3;
  *   all: boolean; // disregard `export const prerender = true`
  * }} opts */
 export async function prerender({ cwd, out, log, config, build_data, fallback, all }) {
+	__fetch_polyfill();
+
 	const dir = resolve_path(cwd, `${SVELTE_KIT}/output`);
 
 	const seen = new Set();

packages/kit/src/core/adapt/prerender.js

@@ -15,14 +15,16 @@ import { copy_assets, get_no_external, resolve_entry } from '../utils.js';
 import { deep_merge, print_config_conflicts } from '../config/index.js';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
 import { get_server } from '../server/index.js';
-import '../../install-fetch.js';
+import { __fetch_polyfill } from '../../install-fetch.js';
 import { SVELTE_KIT } from '../constants.js';
 
 /** @typedef {{ cwd?: string, port: number, host: string, https: boolean, config: import('types/config').ValidatedConfig }} Options */
 /** @typedef {import('types/internal').SSRComponent} SSRComponent */
 
 /** @param {Options} opts */
 export function dev(opts) {
+	__fetch_polyfill();
+
 	return new Watcher(opts).init();
 }
 

packages/kit/src/core/dev/index.js

@@ -4,7 +4,7 @@ import sirv from 'sirv';
 import { getRawBody } from '../node/index.js';
 import { join, resolve } from 'path';
 import { get_server } from '../server/index.js';
-import '../../install-fetch.js';
+import { __fetch_polyfill } from '../../install-fetch.js';
 import { SVELTE_KIT } from '../constants.js';
 
 /** @param {string} dir */
@@ -24,6 +24,8 @@ const mutable = (dir) =>
  * }} opts
  */
 export async function start({ port, host, config, https: use_https = false, cwd = process.cwd() }) {
+	__fetch_polyfill();
+
 	const app_file = resolve(cwd, `${SVELTE_KIT}/output/server/app.js`);
 
 	/** @type {import('types/internal').App} */

packages/kit/src/core/start/index.js

@@ -1,20 +1,26 @@
 import fetch, { Response, Request, Headers } from 'node-fetch';
 
-Object.defineProperties(globalThis, {
-	fetch: {
-		enumerable: true,
-		value: fetch
-	},
-	Response: {
-		enumerable: true,
-		value: Response
-	},
-	Request: {
-		enumerable: true,
-		value: Request
-	},
-	Headers: {
-		enumerable: true,
-		value: Headers
-	}
-});
+// exported for dev, prerender, and preview
+export function __fetch_polyfill() {
+	Object.defineProperties(globalThis, {
+		fetch: {
+			enumerable: true,
+			value: fetch
+		},
+		Response: {
+			enumerable: true,
+			value: Response
+		},
+		Request: {
+			enumerable: true,
+			value: Request
+		},
+		Headers: {
+			enumerable: true,
+			value: Headers
+		}
+	});
+}
+
+// exported for esbuild shims in adapters
+export { fetch, Response, Request, Headers };