T
TanStack•3mo ago
exotic-emerald

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
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 }),
});
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 });
};
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?
2 Replies
exotic-emerald
exotic-emeraldOP•3mo ago
pnpm why react-image-crop

@payloadcms/next 3.40.0
└─┬ @payloadcms/ui 3.40.0
  └── react-image-crop 10.1.8
@payloadcms/ui 3.40.0
└── react-image-crop 10.1.8
pnpm why react-image-crop

@payloadcms/next 3.40.0
└─┬ @payloadcms/ui 3.40.0
  └── react-image-crop 10.1.8
@payloadcms/ui 3.40.0
└── react-image-crop 10.1.8
none of these 2 packages are being imported in this path. This is the only route giving issues.
wise-white
wise-white•3mo ago
you can wrap with function serverOnly example: 
import { serverOnly } from "@tanstack/react-start";
export const getBlogPost = serverOnly(async (id: string) => {
  const payload = await getPayload();
  const blogPost = await payload.findByID({
    collection: "blog-posts",
    id,
  });

  return blogPost;
});

export const getPayload = serverOnly(async () => {
  const { config } = await import("@cf/providers/payload-cms");
  const { getPayload } = await import("payload");
  return getPayload({ config });
});
import { serverOnly } from "@tanstack/react-start";
export const getBlogPost = serverOnly(async (id: string) => {
  const payload = await getPayload();
  const blogPost = await payload.findByID({
    collection: "blog-posts",
    id,
  });

  return blogPost;
});

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

Did you find this page helpful?