[bug] sveltekit vercel adapter does not bundle paraglide, leading to unresolvable imports

[samuelstroschein]

Problem

The SvelteKit Vercel adapter does not bundle paraglide imports.

1. The imports in the compiled output reference the node modules which don't exist in the vercel edge runtime. Every other import is referencing build output ("../chunk.js")
2. The directory structure of the build output does not include node_modules which likely leads to this problem. The paraglide import can't be resolved.

Expected behavior

The bundler processes the paraglide imports instead of leaving them as is.

-import { availableLanguageTags, languageTag, setLanguageTag } from "@inlang/paraglide-js/website";
-import * as m from "@inlang/paraglide-js/website/messages";
+import { a, b, c, messageas } from "../chunk-2ss.js";

Reproduction

TODO

Other information

I suspect the package.exports might play a role here. SvelteKit doesn't use the TypeScript compiler option moduleResolution: Node16 or Bundler yet by default. It might be that the Vercel adapter ignores export maps altogether. A reproduction could be a mock package with exports fields and see how the Vercel adapter behaves.

[samuelstroschein]

/bounty $200

[algora-pbc]

💎 $200 bounty created by samuelstroschein
🙋 If you start working on this, comment /attempt #1485 to notify everyone
👉 To claim this bounty, submit a pull request that includes the text /claim #1485 somewhere in its body
📝 Before proceeding, please make sure you can receive payouts in your country
💵 Payment arrives in your account 2-5 days after the bounty is rewarded
💯 You keep 100% of the bounty award
🙏 Thank you for contributing to inlang/monorepo!

Attempt	Started (GMT+0)	Solution
🟢 @rishi-raj-jain	Oct 24, 2023, 4:38:45 PM	#1

[rishi-raj-jain]

@samuelstroschein

Which repo is this regarding? I'm failing to see any payment-delivery file in the monorepo.

[samuelstroschein]

@rishi-raj-jain a repo from a user. the issue can be replicated with a sveltekit starter template that uses the vercel adapter and deploys to vercel.

The bounty was meant for a community user of ours who faces the issue. Reproducing the error without context is likely difficult for you. Don't know if it's worth your time.

[rishi-raj-jain]

@samuelstroschein

I'd love to know the issue exactly, and then help solve it. Does that sound good?

Where's the template where I can try to reproduce the same?

[samuelstroschein]

@rishi-raj-jain you should be able to replicate the issue with this example https://github.com/inlang/monorepo/tree/main/inlang/source-code/paraglide/paraglide-js-adapter-sveltekit/example if you change the sveltekit adapter to vercel

I believe the bugfix is on SvelteKit's side btw, not ours.

[rishi-raj-jain]

Btw, are you using Vercel edge or serverless adapter?

[rishi-raj-jain]

@samuelstroschein

The issue is with how you're deploying the app. I've just deployed it working at https://example-rishi-raj-jain.vercel.app/en.

As you'd know it needs the monorepo to refer to the packages, or are you deploying that template in an isolated environment which is seperate from it's monorepo? By default, if you just cd to the repo and deploy it to vercel, vercel uploads the code to their platform in case of which, only the starter is sent to Vercel's Code Source and not your repo, hence it's not able to find (as below).

If so, you should update the workflows to do something like vercel deploy --prebuilt after running npm run _build in the monorepo (after replaced the adapter that is).

[samuelstroschein]

@rishi-raj-jain, interesting observation that you can deploy to vercel.

I should have clarified that we don't have deployment issues. Users (with own repositories;not our monorepo) have deployment issues. See this discord thread. The fix therefore seems unrelated. If you really want to solve this issue, try to deploy an individual repository to vercel that fetches the paraglide dependency from NPM.

Maybe the user in the discord thread can share the repo with you. From my observation, the root cause seems that the vercel adapter does not bundle paraglide-js as indicated by the screenshot.

Sorry for the lack of context, the bounty was initially meant for the community member in the Discord thread.

[rishi-raj-jain]

Sorry for the lack of context, the bounty was initially meant for the community member in the Discord thread.

Would you be open to giving it to me if I solve it?

[doic]

I hope @samuelstroschein can give you the bounty @rishi-raj-jain :-)
It was created for me, but if you can solve it, I'm totally happy with that ;-)
I'll give you access to my repo if you want to clone it and deploy it on Vercel.

[samuelstroschein]

@rishi-raj-jain Would you be open to giving it to me if I solve it?

Yes, of course!

[rishi-raj-jain]

This is solved!

• Deployed: https://uu-rishi-raj-jain.vercel.app/en
• Code (attached)

Steps to run:

• npm install
• npm run _build
• vercel deploy

sveltekit-example.zip

[rishi-raj-jain]

TLDR

The main change is

ssr: {
     noExternal: ['@inlang/paraglide-js']
}

Explanation in detail

As the compiled-output folder is already transpiled, using noExternal with vite becomes necessary to be used so that is not left out while bundling.

More specifically, the issue was due to exclusion of the file messages.js in the node_modules of the vercel output while treeshaking, while runtime.js was included because as being the default export from the package.

[algora-pbc]

🎉🎈 @rishi-raj-jain has been awarded $200! 🎈🎊