dependency issue using localAPI in a sveltekit application

[Snailedlt]

Link to reproduction

https://sveltekit-payload-frontend.vercel.app/

Describe the Bug

I get some dependency issues when using the localAPI in a Sveltekit application. I tried using it like so:

// payload-client.ts
import { type BasePayload, getPayload, type GeneratedTypes } from 'payload';
import { importConfig } from 'payload/node';
import 'dotenv/config';
import path from 'node:path';
import { fileURLToPath } from 'node:url';

let payloadInstance: BasePayload<GeneratedTypes>;

// payload-client.ts
export async function initializePayload() {
	const __dirname = path.dirname(fileURLToPath(import.meta.url));
	const payloadConfigPath = path.join(__dirname, './payload/payload.config.ts');
	const awaitedConfig = await importConfig(payloadConfigPath);

	payloadInstance = await getPayload({ config: awaitedConfig });
}

export async function getPayloadInstance() {
	if (!payloadInstance) {
		throw new Error('Payload has not been initialized. Call initializePayload first.');
	}

	return payloadInstance;
}

// +page.server.ts
import { getPayloadInstance, initializePayload } from '$lib/payload-client';

export async function load() {
	await initializePayload();
	const payloadInstance = await getPayloadInstance();
	const user = await payloadInstance.findByID({
		collection: 'users',
		id: '1'
	});

	return { msg: 'welcome', user: user };
}

Running it locally works just fine, both using pnpm dev and making a production build with pnpm build pnpm serve... however deploying it to vercel gives the following error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected][email protected]/node_modules/payload/dist/bin/loader/index.js' imported from /var/task/.svelte-kit/output/server/entries/pages/payload/payload.config.ts
    at finalizeResolution (node:internal/modules/esm/resolve:269:11)
    at moduleResolve (node:internal/modules/esm/resolve:937:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1161:14)
    at defaultResolve (node:internal/modules/esm/resolve:1204:79)
    at nextResolve (node:internal/modules/esm/hooks:866:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:304:30)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:35)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleLoader.import (node:internal/modules/esm/loader:322:34)
    at Hooks.register (node:internal/modules/esm/hooks:165:51) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///var/task/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected]__@[email protected][email protected][email protected]/node_modules/payload/dist/bin/loader/index.js'
}

I tried both inside a turborepo and in a separate project without turborepo. Both failed with similar errors. The error above is from the non-turborepo version, and this error is from the turborepo:

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/var/task/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/payload/dist/bin/loader/index.js' imported from /var/task/apps/web/.svelte-kit/output/cms/src/payload.config.ts
    at finalizeResolution (node:internal/modules/esm/resolve:269:11)
    at moduleResolve (node:internal/modules/esm/resolve:937:10)
    at moduleResolveWithNodePath (node:internal/modules/esm/resolve:1161:14)
    at defaultResolve (node:internal/modules/esm/resolve:1204:79)
    at nextResolve (node:internal/modules/esm/hooks:866:28)
    at Hooks.resolve (node:internal/modules/esm/hooks:304:30)
    at ModuleLoader.resolve (node:internal/modules/esm/loader:352:35)
    at ModuleLoader.getModuleJob (node:internal/modules/esm/loader:234:38)
    at ModuleLoader.import (node:internal/modules/esm/loader:322:34)
    at Hooks.register (node:internal/modules/esm/hooks:165:51) {
  code: 'ERR_MODULE_NOT_FOUND',
  url: 'file:///var/task/node_modules/.pnpm/[email protected]_@[email protected]_@[email protected][email protected][email protected]/node_modules/payload/dist/bin/loader/index.js'
}

Before I opened this issue I discussed it on Discord. The linked discord thread can be found here: https://discord.com/channels/967097582721572934/1238608849099948212

To Reproduce

In order to test the turborepo version:

1. Fork my repo: https://github.com/Snailedlt/svelte-payload-example
2. Pull down the fork locally
3. Copy the .env.example file cp .env.example .env
4. Run pnpm i and pnpm dev to start the cms and web projects. Create a new user in Payload (http://localhost:3000)
5. Go to the frontend (http://localhost:5173) and notice how your email is displayed at the bottom of the page similar to this:
6. If you wanna test the production build you can run pnpm build and pnpm start. This should work the same if done locally.
7. Now that we know it works locally we can test in vercel, but first we need a database. Create a hosted postgres database. I use neon for this: https://neon.tech/ (login link: https://console.neon.tech/app/projects)
8. Deploy both the cms app and the web app as two separate vercel deployments.
   • Here's how the cms app should be deployed: Replace the DATABASE_URI env with your connection string. If you're using neon that can be found in your dashboard. Make sure it's a pooled connection:
   • Here's how the web app should be deployed: Remember to add the env vars here too.
9. Once it's all deployed it should all be green, but if you visit the url for your frontend (web), it should show a 500 internal error. And if you go to the logs in vercel you should be able to see the same error message as described in this issue.

If you want to test the simplified non-turborepo version:

1. Follow all the steps from the turborepo version
2. fork my repo: https://github.com/Snailedlt/sveltekit-payload-frontend
3. If you wanna test it locally it's just cp .env.example .env, pnpm i and pnpm dev
4. deploy it to vercel using the default SvelteKit (v1) settings. Use the same DATABASE_URI as in the turborepo example
5. Go to the deployed website and notice that you get a 500 error here too. If you go to logs in vercel should see the same errors as shown in this issue.

Payload Version

beta (3.0.0-beta.34 as of the time this issue was posted)

Adapters and Plugins

db-postgres, lexical

[JarrodMFlesch]

@Snailedlt my gut tells me that this is a limitation from Vercel. If you check out their docs related to root directory, they say that you cannot access files outside the root of your app.

It looks like you are trying to go up and out of your web app root dir and into another folder within your mono repo in this file.

Could you try copying the payload config into your web app directory and adjust your imports to go to that config file to test this theory?

[Snailedlt]

@JarrodMFlesch Thanks for the response :)

they say that you cannot access files outside the root of your app.

Looks like it should have access to the files outside of the root: I actually got an error about the file path to the config being wrong. After correcting it, it worked even though the file path is outside of the root of the app.

Could you try copying the payload config into your web app directory and adjust your imports to go to that config file to test this theory?

This is what I've done in the other repo I linked to at the bottom of the "To reproduce" section:

If you want to test the simplified non-turborepo version:

Follow all the steps from the turborepo version fork my repo: https://github.com/Snailedlt/sveltekit-payload-frontend If you wanna test it locally it's just cp .env.example .env, pnpm i and pnpm dev deploy it to vercel using the default SvelteKit (v1) settings. Use the same DATABASE_URI as in the turborepo example Go to the deployed website and notice that you get a 500 error here too. If you go to logs in vercel should see the same errors as shown in this issue.

[Snailedlt]

@AlessioGr let me know if you need anything, whether it be clarification or help testing.

[AlessioGr]

Fixed by https://github.com/payloadcms/payload/pull/7620

[Snailedlt]

@AlessioGr I tried redeploying now, but I get the same 500 error that I did before.

This is my package.json files for the web and cms in the svelte-payload-example repo

Do I need to update something in my dependencies, or somewhere else?

[github-actions[bot]]

This issue has been automatically locked. Please open a new issue if this issue persists with any additional detail.