Cannot import packages on vercel deployment, works fine in dev #869

Activity

1. Rotfuchs-von-Vulpes commented on Apr 4, 2021

   

   Rotfuchs-von-Vulpes

   on Apr 4, 2021 · Hidden as off-topic

   show commentMore actions
2. benmccann

   added

   pkg:adapter-vercelPertaining to the Vercel adapterPertaining to the Vercel adapter

   on Apr 5, 2021
3. dsegovia90 commented on Apr 6, 2021

   

   dsegovia90

   on Apr 6, 2021

   Last edited by dsegovia90

   More actions

   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.
4. marcusmmmz commented on Apr 6, 2021

   

   marcusmmmz

   on Apr 6, 2021

   Author

   More actions

   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.
5. marcusmmmz commented on Apr 7, 2021

   

   marcusmmmz

   on Apr 7, 2021

   Last edited by marcusmmmz

   Author

   More actions

   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?
6. benmccann

   added

   vite

   and removed

   pkg:adapter-vercelPertaining to the Vercel adapterPertaining to the Vercel adapter

   on Jul 25, 2021
7. benmccann commented on Oct 13, 2021

   

   benmccann

   on Oct 13, 2021

   Member

   More actions

   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

   👍React with 👍1Reacted by Marcus
8. benmccann

   closed this as completedon Oct 13, 2021