@sveltejs/adapter-vercel 1.0.0-next.51 breaks production project

[MathiasWP]

Describe the bug

The "start" method goes from...

start({
	target: document.querySelector('[data-hydrate="16zlsws"]').parentNode,
	paths: {"base":"","assets":""},
	session: {},
	route: true,
	spa: false,
	trailing_slash: "never",
	hydrate: {
		status: 200,
		error: null,
		nodes: [
			import("/_app/pages/__layout.svelte-f2210a94.js"),
				import("/_app/pages/index.svelte-61687a47.js")
		],
		params: {},
		routeId: ""
	}
});

...to...

start({
	target: document.querySelector('[data-hydrate="2eq20f"]').parentNode,
	paths: {"base":"","assets":""},
	session: {token:void 0},
	route: true,
	spa: false,
	trailing_slash: "never",
	hydrate: {
		status: 500,
		error: {name:"Error",message:"Dynamic require of \"tty\" is not supported",stack:"Error: Dynamic require of \"tty\" is not supported"},
		nodes: [
			import("/_app/undefined"),
				import("/_app/pages/__error.svelte-c1882640.js")
		],
		params: {},
		routeId: ""
	}
});

when updating the vercel adapter from next.50 to next.51.

This change triggers the following error message when trying to open up the project in production.

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://my-website.vercel.app/_app/undefined

Reproduction

Here's a MVP that will break in production with adapter.51, but will work with adapter.50: https://github.com/MathiasWP/vercel-adapter-bug-reproduction

The project has 2 branches, main with adapter next.51, and a branch called adapter.50 with the next.50 version.

Here is a deployed version with the next.50 adapter (working): https://vercel-adapter-bug-reproduction-mps8glry7-mathiaswp.vercel.app/
And here is the exact same application with the next.51 adapter (not working): https://vercel-adapter-bug-reproduction.vercel.app/

Logs

No response

System Info

System:
    OS: macOS 11.4
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
    Memory: 23.68 MB / 8.00 GB
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 16.13.0 - /usr/local/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 8.1.0 - /usr/local/bin/npm
  Browsers:
    Brave Browser: 101.1.38.111
    Chrome: 101.0.4951.64
    Edge: 101.0.1210.47
    Firefox: 100.0
    Safari: 14.1.1
  npmPackages:
    @sveltejs/adapter-vercel: ^1.0.0-next.51 => 1.0.0-next.51 
    @sveltejs/kit: 1.0.0-next.330 => 1.0.0-next.330 
    svelte: ^3.46.0 => 3.48.0

Severity

blocking an upgrade

Additional Information

No response

[Conduitry]

A reproduction is a link to a minimal project that demonstrates this behavior, not an assertion that this happened with your project which no one is able to see.

[MathiasWP]

I'm trying to set up a MVP @Conduitry, but I'm struggling to reverse-engineer the cause of this bug. My current findings are similar to stuff discussed in this issue: #2400.

I've diffed the build-output on my project with the next.50 and next.51 adapter, and one of the differences is that the vercel build output with the next.51 adapter has a require function that throws an error (#2400 (comment)) with the same message that is in hydrate.error in my comment above.

I'm not up to date with the code that builds a SvelteKit project, but if this seems like a valid bug I'll gladly provide more info or help in other ways.

[MathiasWP]

Update: I've managed to recreate the bug @Conduitry. Here's an MVP that will break in production with adapter.51, but will work with adapter.50: https://github.com/MathiasWP/vercel-adapter-bug-reproduction

The project has 2 branches, main with adapter next.51, and a branch called adapter.50 with the next.50 version.

Here is a deployed version with the next.50 adapter (working): https://vercel-adapter-bug-reproduction-mps8glry7-mathiaswp.vercel.app/
And here is the exact same application with the next.51 adapter (not working): https://vercel-adapter-bug-reproduction.vercel.app/

[kristjanmar]

I'm also getting this, updating to the latest sveltekit and adapter-auto causes my production build to fail.

500
Failed to fetch dynamically imported module: https://stock-analysis-sveltekit-p8nrdgjki-stockanalysis.vercel.app/_app/undefined
TypeError: Failed to fetch dynamically imported module: https://stock-analysis-sveltekit-p8nrdgjki-stockanalysis.vercel.app/_app/undefined

Here's the repo: https://github.com/stockanalysisdev/stock-analysis-sveltekit/tree/update-packages

[MathiasWP]

I have a feeling that the bug is related to CJS packages that are converted to ESM by the bundler

[creekdrops]

I too can confirm this behavior. For me, it was throwing an error related to Crypto. Downgrading to adapter-auto@1.0.0-next.41 seems to have resolved the issue for now.

[dangelomedinag]

I have the same problem, I had to go back to vercel-adapter.next.49 because it stopped working in production. I don't have enough experience to determine the problem but it seems to me that it is about the endpoints since the pages that do not make calls to my endpoints nor load functions are rendered correctly.

[tonprince]

I have the same issue when using firebase-admin in a sveltekit endpoint with "@sveltejs/adapter-vercel": "^1.0.0-next.51". I rolled back to version 50 as a workaround.

2022-05-16T12:39:04.677Z b97193e6-f60d-45b4-9b85-9eebe6f15497 ERROR Error: Dynamic require of "fs" is not supported at file:///var/task/index.js:29:9 at node_modules/firebase-admin/lib/app/lifecycle.js (file:///var/task/index.js:28040:14) at __require2 (file:///var/task/index.js:47:51) at node_modules/firebase-admin/lib/app/firebase-namespace.js (file:///var/task/index.js:163421:23) at __require2 (file:///var/task/index.js:47:51) at node_modules/firebase-admin/lib/default-namespace.js (file:///var/task/index.js:163701:32) at __require2 (file:///var/task/index.js:47:51) at node_modules/firebase-admin/lib/index.js (file:///var/task/index.js:163711:20) at __require2 (file:///var/task/index.js:47:51) at .svelte-kit/output/server/entries/endpoints/todos/index.js (file:///var/task/index.js:163743:37)

Reproduce here:
https://my-app-tonprince.vercel.app/todos
https://github.com/tonprince/my-app

[dextermb]

I can also confirm this is happening with "@sveltejs/adapter-vercel": "1.0.0-next.52". I've downgraded to 1.0.0-next.50 and everything is working as expected again

[tonprince]

Netlify went down the same road and had to revert changes:
https://answers.netlify.com/t/netlify-serverless-typescript-functions-fail-with-dynamic-requires/52379/13

[tonprince]

A possible solution could be using the @hyrious/esbuild-plugin-commonjs plugin.

[Rich-Harris]

This broke in #4782, which switched to using esm as the output format instead of cjs, in order to support top-level await. Investigating solutions in #4967.

[sartoshi-foot-dao]

Thank you for this.