Cannot import packages on vercel deployment, works fine in dev

[marcusmmmz]

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/[email protected] --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>

4. Change noExternal to External in svelte.config.cjs
5. Replace adapter-node with adapter-vercel and deploy to vercel
6. 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. (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. (/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(R) Core(TM) 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

[dsegovia90]

Hi @marcusmmmz, I cloned your repo and gave it a try. I've been also struggling with the vercel adapter, and here's what I've learned. For context, I've never used ably before, but here goes.

• First, the ably package uses the window object (even when just importing it), which would fail on build with sveltekit since it's trying to server-side render your components/pages. So the first thing to do is to add the browser check from $app/env.
• Second, dynamically import the component, so it does not try to attach to the window on import.

You can take a look at the sveltekit docs here, it sort of gives a hint.

Also, I've removed the package from Externals (which should be externals with lowercase, vite docs here), and added it back to noExternals, this will bundle up the ably npm package into the build bundle, which is what you should want for a front-end, since there's no packages in (old?) browsers. Note that this will obviously impact the bundle size.

You can take a look at my cloned repo here and at my vercel link here.

[marcusmmmz]

Hey @dsegovia90

I think somebody on Discord told me / i saw someone on Discord using External like that to solve those errors, so that's what i did, my bad.

But even though that was my mistake, it's still bad that this issue only happens after deploy, and SvelteKit getting closer to the prod enviroment (If possible) would surely make debugging easier and eliminate future issues like this one.

By the way, does the ably package really attach to window? I'm also successfully using it server-side with NodeJS so that's strange. 😅 But yeah i don't want it server-side rendered as it's realtime stuff.

[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>

2. 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"
    }
}

3. 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?

[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