Cannot import packages on vercel deployment, works fine in dev

Describe the bug The project works just fine in dev and build gives no errors, but i get the error “Cannot find package ‘ably’ imported from /var/task/server/app.mjs” when deploying to Vercel

To Reproduce

1. Create a new project from the svelte@next template
2. npm i ably and npm i @sveltejs/adapter-vercel@1.0.0-next.10 --save-dev
3. Replace index.svelte with

<script lang="ts">
	import ably from "ably"
	// just so i don't have unused import warnings
	ably
</script>

<main>
	<h1>hello world</h1>
</main>

1. Change noExternal to External in svelte.config.cjs
2. Replace adapter-node with adapter-vercel and deploy to vercel
3. When you open the page you’ll be greeted with a 500 FUNCTION_INVOCATION_FAILED error, and you’ll get “cannot find package” errors in the deployment’s function panel (also, switch from All to Errors to see them)

Repo: https://github.com/marcusmmmz/sveltekit-vercel-bug

Expected behavior No errors and vercel deployment working the same as in dev

Stacktraces

Sorry but i really don’t know if this should be a log or a stack trace

Stack trace

[GET] / 11:37:00:22 2021-04-04T14:37:00.373Z dc1493b6-eb22-49e2-bb1c-1f93e8dd115a ERROR Unhandled Promise Rejection {“errorType”:“Runtime.UnhandledPromiseRejection”,“errorMessage”:“Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘ably’ imported from /var/task/server/app.mjs”,“reason”:{“errorType”:“Error”,“errorMessage”:“Cannot find package ‘ably’ imported from /var/task/server/app.mjs”,“code”:“ERR_MODULE_NOT_FOUND”,“stack”:[“Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘ably’ imported from /var/task/server/app.mjs”," at packageResolve (internal/modules/esm/resolve.js:655:9)“,” at moduleResolve (internal/modules/esm/resolve.js:696:18)“,” at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:810:11)“,” at Loader.resolve (internal/modules/esm/loader.js:86:40)“,” at Loader.getModuleJob (internal/modules/esm/loader.js:230:28)“,” at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:56:40)“,” at link (internal/modules/esm/module_job.js:55:36)“]},“promise”:{},“stack”:[“Runtime.UnhandledPromiseRejection: Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘ably’ imported from /var/task/server/app.mjs”,” at process.<anonymous> (/var/runtime/index.js:35:15)“,” at process.emit (events.js:327:22)“,” at processPromiseRejections (internal/process/promises.js:245:33)“,” at processTicksAndRejections (internal/process/task_queues.js:94:32)"]} Unknown application error occurred

Information about your SvelteKit Installation:

Diagnostics

System: OS: Linux 5.10 Manjaro Linux CPU: (4) x64 Intel® Core™ i3-6006U CPU @ 2.00GHz Memory: 293.43 MB / 3.63 GB Container: Yes Shell: 5.1.0 - /bin/bash Binaries: Node: 15.11.0 - /usr/bin/node npm: 7.6.3 - /usr/bin/npm Browsers: Brave Browser: unknown Firefox: 87.0 npmPackages: @sveltejs/kit: next => 1.0.0-next.71 svelte: ^3.29.0 => 3.37.0 vite: ^2.1.0 => 2.1.5

• Brave browser

• Vercel Adapter

Severity This makes the vercel-adapter unusable for anyone using npm packages, which i guess is most devs

Additional information I also tried this with socket.io-client package, and i tried putting them in devDeps and Deps, same results

[benmccann]

SSR options changing an endpoint behaviour? This doesn’t seem right

Endpoints run on the server. It’s expected that those Vite options control all behavior on the server. Though it’s a bit harder to load packages in endpoints in some cases than I hope it would be. We’re continuing to work on that

Since it sounds like you got this fixed by changing external/noExternal I’ll go ahead and close this. There are some issues in the Vite issue tracker where we’re trying to improve this experience

[marcusmmmz]

About the server-side usage of Ably: If i have a SvelteKit endpoint and i use external it works just fine, but if i use noExternal i get “window is not defined error” (and this is in dev, this time there’s no need to deploy…). Isn’t external and noExternal related to SSR? if it does, i don’t understand how those can affect endpoints.

To test it yourself:

1. replace index.svelte with

<script lang="ts">
	import { onMount } from "svelte";

	onMount(async ()=>{
		let res = await fetch("/test")
		alert( await res.text() )
	})
</script>

<main>
	<h1>hello world</h1>
</main>

1. Create a test.ts file inside the routes folder, with this inside:

import "ably"

export async function get(req) {
    console.log("requested successfully!");
    return {
        body:"response"
    }
}

1. Now open the website and watch the server output with all deps in external, and then try that with all deps in noExternal

SSR options changing an endpoint behaviour? This doesn’t seem right

I should make a new issue for this i guess?