TanStackT
TanStack•8mo ago•
2 replies
static-pink

Leaking Payload CMS code into client

I'm trying to integrate Paylaod CMS into Tanstack and failing spetacularly. The main problem is that no matter how hard I try to isolate paylaod and not have it leak into the client, it keeps somehow making its way there.

In the end this is the error i get: 

Unknown file extension ".css" for /Users/dev/chair-flight-new/node_modules/.pnpm/react-image-crop@10.1.8_react@19.1.0/node_modules/react-image-crop/dist/ReactCrop.css


this is not a dependency of my project, rather something payload is importing. Here is what im doing: 

const getBlogPostFromServer = createServerFn()
  .validator(z.string().parse)
  .handler(async ({ data }) => getBlogPost(data));

export const Route = createFileRoute({
  staleTime: Infinity,
  component: BlogPostPage,
  loader: ({ params }) => getBlogPostFromServer({ data: params.postId }),
});


export const getBlogPost = async (id: string) => {
  const payload = await getPayload();
  const blogPost = await payload.findByID({
    collection: "blog-posts",
    id,
  });

  return blogPost;
};

export const getPayload = async () => {
  const { config } = await import("@cf/providers/payload-cms");
  const { getPayload } = await import("payload");
  return getPayload({ config });
};


This all in a failed effort to make sure imports from paylaod and config have nothing to do with client stuf.... where am i going wrong?
Was this page helpful?