Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Type 'DocumentType<"Blog">' is not assignable to type 'DocumentType<string>'

See original GitHub issue

Hey there… I started getting this error with v 0.0.30, it was working fine with v 0.0.27

./contentlayer.config.ts:160:19
Type error: Type 'DocumentType<"Blog">' is not assignable to type 'DocumentType<string>'.
  Types of property 'def' are incompatible.
    Type 'Thunk<DocumentTypeDef<"Blog">>' is not assignable to type 'Thunk<DocumentTypeDef<string>>'.
      Type 'DocumentTypeDef<"Blog">' is not assignable to type 'DocumentTypeDef<string>'.
        Types of property 'computedFields' are incompatible.
          Type 'ComputedFields<"Blog"> | undefined' is not assignable to type 'ComputedFields<string> | undefined'.
            Type 'ComputedFields<"Blog">' is not assignable to type 'ComputedFields<string>'.
              Type 'string' is not assignable to type '"Blog"'.

  158 | const contentLayerConfig = makeSource({
  159 |   contentDirPath: 'data',
> 160 |   documentTypes: [Blog, InspirationItem],
      |                   ^
  161 |   mdx: {
  162 |     remarkPlugins: [remarkGfm],
  163 |     rehypePlugins: [
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

This is the content of contentlayer.config.ts

import { ComputedFields, defineDocumentType, makeSource } from 'contentlayer/source-files';
import readingTime from 'reading-time';
import rehypeAutolinkHeadings from 'rehype-autolink-headings';
import rehypeSlug from 'rehype-slug';
import remarkGfm from 'remark-gfm';

const computedFields: ComputedFields = {
  readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
  slug: {
    type: 'string',
    // eslint-disable-next-line no-underscore-dangle
    resolve: (doc) => doc._raw.sourceFileName.replace(/\.mdx$/, ''),
  },
};

const Blog = defineDocumentType(() => ({
  name: 'Blog',
  filePathPattern: 'posts/*.mdx',
  bodyType: 'mdx',
  fields: {
    title: { type: 'string', required: true },
    date: { type: 'string', required: true },
    hero: { type: 'string', required: true },
    excerpt: { type: 'string' },
    description: { type: 'string' },
    author: { type: 'json' },
    ogImage: { type: 'json' },
  },
  computedFields,
}));

const computedInspirationFields: ComputedFields = {
  favicon: {
    type: 'string',
    resolve: async (doc) => {
      return `${doc.link}/static/images/favicon.png`;
    },
  },
};

export const InspirationItem = defineDocumentType(() => ({
  name: 'InspirationItem',
  filePathPattern: 'inspiration/*.json',
  fields: {
    title: { type: 'string', required: true },
    link: { type: 'string', required: true },
    favicon: { type: 'string' },
  },
  computedFields: computedInspirationFields,
}));

export default makeSource({
  contentDirPath: 'data',
  documentTypes: [Blog, InspirationItem],
  mdx: {
    remarkPlugins: [remarkGfm],
    rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings],
  },
});