'The ContentLayer library dosen't return "code" property for MDXComponent

I'm using ContentLayer library for import MDX content in my blog.

I've read a several opensource code and I following them, but in my case I don't have "code" property in my "body" object.

ContentLayer body

while I cloend other opensource project and they works correctly and I saw they have "code" property in their "body" object.

this is my [slug].tsx:

import BlogLayout from '@layouts/blog';
import { useMDXComponent } from 'next-contentlayer/hooks';
import { allBlogs } from '../../.contentlayer/generated';
import type { Blog } from '../../.contentlayer/generated';
type BlogProps = {
  blog: Blog;
};

export default function Blog({ blog }: BlogProps) {
  console.log(blog.body.code);
  const Component = useMDXComponent(blog.body.code);
  return (
    <BlogLayout blog={blog}>
      <Component />
    </BlogLayout>
  );
}

export const getStaticPaths = async () => {
  return {
    paths: allBlogs.map(p => ({ params: { slug: p.slug } })),
    fallback: false,
  };
};

export const getStaticProps = async ({ params }) => {
  const blog = allBlogs.find(p => p.slug === params.slug);
  return {
    props: {
      blog,
    },
  };
};

and this is my contentLayer configuration:

import { defineDocumentType, makeSource } from 'contentlayer/source-files';
import mdxOptions from './config/mdx';
import readingTime from 'reading-time';

export const Blog = defineDocumentType(() => ({
  name: 'Blog',
  bodyType: 'mdx',
  filePathPattern: `blogs/**/*.mdx`,
  fields: {
    title: { type: 'string', required: true },
    publishedAt: { type: 'string', required: true },
    description: { type: 'string', required: true },
    cover: { type: 'string' },
    tag: { type: 'string' },
  },
  computedFields: {
    readingTime: {
      type: 'json',
      resolve: doc => readingTime(doc.body.raw),
    },
    slug: {
      type: 'string',
      resolve: doc => doc._raw.sourceFileName.replace(/\.mdx$/, ''),
    },
  },
}));

export default makeSource({
  contentDirPath: '_posts',
  documentTypes: [Blog],
  mdx: mdxOptions,
});

In my case "body" object has these objects: { _raw , html }

I don't know what's the problem and why I don't have "code" property in my "body" object

I appreciate all feedback from you.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source