🐛 BUG: Code Component breaks on Vercel SSR

[FredKSchott]

What version of @astrojs/compiler are you using?

latest

What package manager are you using?

pnpm

What operating system are you using?

mac

Describe the Bug

The <Code> component works in dev, and works in all other build output formats that I tried (static, SSR /w @astrojs/node).

However, when I use @astrojs/vercel and deploy, the build is successful but then I get the following error when I request a route that uses the <Code> component:

2022-11-10T00:14:54.906Z	74074352-f9c1-4006-b3d2-f50c3ddf0e0b	ERROR	Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"Error: ENOENT: no such file or directory, open '/var/task/node_modules/shiki/themes/github-dark.json'","reason":{"errorType":"Error","errorMessage":"ENOENT: no such file or directory, open '/var/task/node_modules/shiki/themes/github-dark.json'","code":"ENOENT","errno":-2,"syscall":"open","path":"/var/task/node_modules/shiki/themes/github-dark.json","stack":["Error: ENOENT: no such file or directory, open '/var/task/node_modules/shiki/themes/github-dark.json'"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: Error: ENOENT: no such file or directory, open '/var/task/node_modules/shiki/themes/github-dark.json'","    at process.<anonymous> (file:///var/runtime/index.mjs:1131:17)","    at process.emit (node:events:539:35)","    at process.emit (node:domain:475:12)","    at emit (node:internal/process/promises:140:20)","    at processPromiseRejections (node:internal/process/promises:274:27)","    at processTicksAndRejections (node:internal/process/task_queues:97:32)"]}
Unknown application error occurred
Runtime.Unknown

It looks like this is the same issue as this: code-hike/codehike#283 (comment)

The problem is that Astro/Vite does not detect the dependency on these files, since Shiki uses fs to load then instead of require/import. Therefore, they never end up in the final build. Next.js had to solve this problem more globally with a workaround called unstable_includeFiles, we may want to do the same.

Link to Minimal Reproducible Example

https://gist.github.com/FredKSchott/b875fec67552289e75ebc594499ccc32

[FredKSchott]

Since we own this dependency internally, what if we took over theme loading as a way to fix this ourselves? If you translate this issue to English, you can see someone providing and hooking up the themes themselves, which works around the broken automatic theme loading inside of Shiki: https://zenn.dev/thiragi/scraps/4150e766090adb

We could also track down this issue to the Shiki repo, and see if they are willing to fix internally. I haven't done this yet, but my guess is that if it was fixible in Shiki they would have already...

[matthewp]

Think this is the same underlying cause as #5253. Vercel copies files by examining your built code and doesn't find dynamic stuff.

We need some mechanism where an integration can tell Vercel of additional files that should be copied. The user can do this with includeFiles config. But it would be good if users didn't need to do this to make the Code and image components work.

[FredKSchott]

If it helps, this would be (roughly) the snippet to skip the bug:

const allThemes = import.meta.globEager('shiki/themes/*.json');
const loadedTheme = allThemes[Astro.props.theme];

[ahtcx]

Here's my config with a workaround for anyone who needs:

Make sure to check the node_modules path is correct, if you use a monorepo the .pnpm folder might exist on a level above.

import { defineConfig } from "astro/config";

import mdx from "@astrojs/mdx";
import react from "@astrojs/react";
import vercel from "@astrojs/vercel/serverless";

const shikiResourcePaths = Object.keys(
	import.meta.glob([
		"./node_modules/.pnpm/shiki@*/node_modules/shiki/languages/*.tmLanguage.json",
		"./node_modules/.pnpm/shiki@*/node_modules/shiki/themes/*.json",
	]),
);

export default defineConfig({
	output: "server",
	adapter: vercel({
		includeFiles: shikiResourcePaths,
	}),
});