hooks.js example causes a build error

[websocket98765]

Describe the bug

When the following hooks.js file exists, npm run build throws an error. (However npm run dev works without error and the site runs perfectly.)

To Reproduce

1. Add src/hooks.js

export async function handle(request, render) {
  const response = await render(request);

  return {
    ...response,
    headers: {
      ...response.headers,
      'x-custom-header': 'potato'
    }
  };
}

2. Run npm run build.

The command will throw this error:

✓ 38 modules transformed.
.svelte/output/server/app.js      193.07kb
.svelte/output/server/style.css   7.76kb

Run npm start to try your app locally.

> Using @sveltejs/adapter-node
TypeError: Cannot read property 'headers' of undefined
    at Object.handle (file:///Users/me/sveltekit-demo/.svelte/output/server/app.js:1890:19)
    at async ssr (file:///Users/me/sveltekit-demo/.svelte/output/server/app.js:1677:12)
    at async visit (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:531:20)
    at async prerender (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:682:5)
    at async Builder.prerender (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:743:4)
    at async adapt (/Users/me/sveltekit-demo/node_modules/@sveltejs/adapter-node/index.js:26:4)
    at async adapt (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:765:2)
    at async file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/cli.js:598:5
> 500 /about
Error: 500 /about
    at error (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:523:11)
    at visit (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:574:5)
    at async prerender (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:682:5)
    at async Builder.prerender (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:743:4)
    at async adapt (/Users/me/sveltekit-demo/node_modules/@sveltejs/adapter-node/index.js:26:4)
    at async adapt (file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/chunks/index5.js:765:2)
    at async file:///Users/me/sveltekit-demo/node_modules/@sveltejs/kit/dist/cli.js:598:5
npm ERR! code 1
npm ERR! path /Users/me/sveltekit-demo
npm ERR! command failed
npm ERR! command sh -c svelte-kit build

about.svelte is nothing special:

<h1>About this site</h1>
<p>TODO...</p>

svelte.config.cjs contains adapter as: adapter: node(),.

Information about your SvelteKit Installation:

  System:
    OS: macOS 11.2.2
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
 npmPackages:
    @sveltejs/kit: next => 1.0.0-next.64 
    svelte: ^3.35.0 => 3.35.0 

Severity

Minor

[Rich-Harris]

Ah, yep, this makes sense. In the prerender step, nothing gets returned from render for non-prerenderable pages. Not 100% sure what the right move is here — it's easy enough to just add an if (response) block but it feels a bit leaky since something is always returned normally. It could return a 404 response but that doesn't feel totally correct either. Hmm...

[tbremer]

Ran across an issue with the prerender step because I have a handle function that is doing some basic checks to ensure only authorized users can access a page.

hooks.ts:

import { ensureAdmin } from '$lib/ensureAdmin.ts';

export async function handle(request, render) {
	const { path, headers } = request;

	if (/\/admin/.test(path) && !ensureAdmin(request)) {
		return { status: 403 };
	}

	return render(request);
}

I tried looking at the different environments from $app/env but it did not seem appropriate to key off of any of the current ones.

Maybe if there was an env for prerendering / adapting?

[Rich-Harris]

Yeah, I think import { prerender } from '$app/env' is a great idea

[tbremer]

I was poking around in the code adjacent to the import.meta.env and it seems like most of that is hoisted from the Vite process. Vite exposes additionally MODE flag which is production for the build (https://github.com/vitejs/vite/blob/77971eda77db3cdaf07880bf19846b184de62466/docs/guide/env-and-mode.md), but that is not entirely helpful for this issue.

If I am grokking the codebase correctly it seems like this would be the first env flag that would be unique to SvelteKit runtime.

It looks like the adapt function could be a good place to update that env flag.

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

Lines 9 to 19 in 8805c6d

	export async function adapt(config, { cwd = process.cwd(), verbose }) {
	const { name, adapt } = config.kit.adapter;
	console.log(colors.bold().cyan(`\n> Using ${name}`));
	const log = logger({ verbose });
	const builder = new Builder({ cwd, config, log });
	await adapt(builder);
	log.success('done');
	}

Though, it does not look like the $app/env exports are reactive, so it might be better placed in the CLI build function.

kit/packages/kit/src/cli.js

Lines 100 to 104 in 24fab19

	prog
	.command('build')
	.describe('Create a production build of your app')
	.option('--verbose', 'Log more stuff', false)
	.action(async ({ verbose }) => {

Edit: Sorry for blasting this issue, but I did a little more digging and found that Vite does some pretty heavy handed work for ensuring the import.meta.env is defined within their code.

https://github.com/vitejs/vite/blob/fa8574921195dd03b539c150a2ae5f97121a0aea/packages/vite/src/node/plugins/define.ts#L16-L31

Any thoughts? I'm happy to make a pull request.

[Rich-Harris]

In the process of trying to figure out how we'd tackle this, I ended up writing the code, so I took the liberty of opening a PR: #833

[tbremer]

That's awesome, thanks for taking the time to move this along!

[benmccann]

I'm assuming this was fixed since #833 was merged, but let me know if that's incorrect. I was having a bit of a hard time following whether there were two things being discussed here or just one

[acoyfellow]

I have to investigate if my problem is actually this... but, i updated to ^1.0.0-next.69 and this error persists for me (TypeError: Cannot read property 'headers' of undefined). My hooks file i'm using is this: https://gist.github.com/acoyfellow/d8e86979c66ebea25e1643594e38be73

edit: I can still reproduce with this simple hooks/index.js file:

export async function handle(request, render) {
  const response = await render(request);
  console.log('response', response);
  return {
    ...response,
    headers: {
      ...response.headers
    }
  };
}

error:

response undefined
TypeError: Cannot read property 'headers' of undefined