Tanstack start loader functions fail when loading payload

[timber topaz]

I'm trying to integrate payload CMS with tnastack Start. Tanstack is vite based, and supports SSR.

Here is the relatively simple example that fails:

const CmsPreviewBlogPost: FunctionComponent = () => {
    const { blogPost } = Route.useLoaderData()
    return (
        <>
            <div>{blogPost.title}</div>
        </>
    );
}

export const Route = createFileRoute('/(cms)/preview/blog-post/$id')({
    component: CmsPreviewBlogPost,
    loader: async ({ params }) => {
        const { getPayload } = await import('payload');
        const { config } = await import("@cf/providers/payload");
        const payload = await getPayload({ config })
        const blogPost = await payload.findByID({
            collection: 'blog-posts',
            id: params.id,
            draft: true,
        })
        return { blogPost }
    }
})

and the error i get:

The requested module '/_build/node_modules/.pnpm/bson-objectid@2.0.4/node_modules/bson-objectid/objectid.js?v=97dd5044' does not provide an export named 'default'

i already tried to add this package to vite config to ban it from client bundles, without success:

  vite: {
    ssr: {
      external: ['payload', 'bson-objectid'],
    },
    optimizeDeps: {
      exclude: ['payload', 'bson-objectid'],
    },

any ideas? Thanks!

[wild pumice]

New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

• The Payload Config - Server vs. Client
• Sentry Plugin - What is Sentry?
• Custom Features - Server Feature - Feature load order
• Hooks Overview - Root Hooks - afterError
• Collection Hooks - Config Options - afterError

[timber topaz]

For anyone reading this in the future, the problem was me. and not related to payload. the loader is isomorphyc and runs on client and server. I needed to wrap it under a server function

[wild pumice]

Payload Bot

Thread Solved!

Glad your issue was resolved! :tada: If you want to help make payload better, please give us a :star: on GitHub and review us - It helps us a lot.

🌟 Star Us on GitHub

Click here to star us on GitHub

👍 Review Us

Click here to review us on G2

[oak iron]

Hi, @pupo, I tried to integrate TanStack Start (frontend) with an existing Payload CMS (backend) in a monorepo. There is already some data in the PostgreSQL database. When I start the frontend, Payload gives me this warning:

[✓] Pulling schema from database...
✔ Warnings detected during schema push:

· You're about to delete prefix column in document_assets table with 48 items
· You're about to delete prefix column in video_screenshots table with 570 items
· You're about to delete prefix column in page_assets table with 421 items
· You're about to delete prefix column in video_assets table with 1 items
· You're about to delete prefix column in agent_assets table with 1 items

DATA LOSS WARNING: Possible data loss detected if schema is pushed.

Is this normal? If not, could you share your approach or any code examples showing how you integrated Payload with TanStack Start? Thank you!