Fumadocs custom Content Collection throwing an error

Answered

Reddish carpenter ant posted this in #help-forum

Reddish carpenter antOP

2025-07-28T02:38:14.435Z

I'm creating a custom content for blog and work.

Reading: https://fumadocs.dev/docs/headless/content-collections

This is the error:

Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported.
  {CodeBlockTab: client, CodeBlockTabs: ..., CodeBlockTabsList: ..., CodeBlockTabsTrigger: ..., pre: ..., Card: ..., Cards: ..., a: ..., img: ..., h1: ..., h2: ..., h3: ..., h4: ..., h5: ..., h6: ..., table: ..., Callout: {$$typeof: ..., render: ...}}

These are my files:

TsConfig defaut settings, but this:

 "paths": {
      "@/.source": ["./.source/index.ts"],
      "@/*": ["./src/*"],
      "content-collections": ["./.content-collections/generated"]
    },

next config:

import { withContentCollections } from '@content-collections/next';

const config = {
  reactStrictMode: true,
};

export default withContentCollections(config);

Content collection:

import { defineCollection, defineConfig } from '@content-collections/core';
import {
  createDocSchema,
  createMetaSchema,
  transformMDX,
} from '@fumadocs/content-collections/configuration';

const blog = defineCollection({
  name: 'blog',
  directory: 'content/blog',
  include: '**/*.mdx',
  schema: createDocSchema,
  transform: transformMDX,
});

const work = defineCollection({
  name: 'work',
  directory: 'content/work',
  include: '**/*.mdx',
  schema: createDocSchema,
  transform: transformMDX,
});

const metas = defineCollection({
  name: 'meta',
  directory: 'content',
  include: '**/meta.json',
  parser: 'json',
  schema: createMetaSchema,
});

export default defineConfig({
  collections: [blog, work, metas],
});

Source.ts

import { allBlogs, allMetas } from 'content-collections';
import { loader } from 'fumadocs-core/source';
import { createMDXSource } from '@fumadocs/content-collections';

export const source = loader({
  baseUrl: '/blogs',
  source: createMDXSource(allBlogs, allMetas),
});

Answered by Yi Lon Ma

this is different than how it is shown in docs

View full answer

19 Replies

Yi Lon Ma

2025-07-28T03:45:48.763Z

How are you rendering the mdx

@Yi Lon Ma How are you rendering the mdx

Reddish carpenter antOP

2025-07-28T03:56:38.184Z

What do you mean?

Are you talking about this:

import { source } from '@/lib/source';

import { notFound } from 'next/navigation';
import { createRelativeLink } from 'fumadocs-ui/mdx';
import { getMDXComponents } from '@/mdx-components';

export default async function Page(props: { params: Promise<{ slug?: string[] }>; }) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  const MDXContent = page.data.body;
  console.log(page)
  return (
    <div>
      hi
      <MDXContent
        components={getMDXComponents({
          a: createRelativeLink(source, page),
        })}
      />
    </div>
  );
}

export async function generateStaticParams() {
  return source.generateParams();
}

export async function generateMetadata(props: {
  params: Promise<{ slug?: string[] }>;
}) {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  return {
    title: page.data.title,
    description: page.data.description,
  };
}