TypeError: Cannot read properties of undefined (reading 'source')

[Prashant Joshi]

contentlayer.config.js

import { defineDocumentType, makeSource } from 'contentlayer/source-files'

import readingTime from 'reading-time'
import remarkGfm from 'remark-gfm'
import rehypeSlug from 'rehype-slug'
import rehypeCodeTitles from 'rehype-code-titles'
import rehypeAutolinkHeadings from 'rehype-autolink-headings'
import rehypePrism from 'rehype-prism-plus'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'

const computedFields = {
	readingTime: { type: 'json', resolve: (doc) => readingTime(doc.body.raw) },
	wordCount: {
		type: 'number',
		resolve: (doc) => doc.body.raw.split(/\s+/gu).length
	},
	slug: {
		type: 'string',
		resolve: (doc) => doc._raw.sourceFileName.replace(/\.mdx$/, '')
	}
}

const Blog = defineDocumentType(() => ({
	name: 'Blog',
	filePathPattern: 'blog/*.mdx',
	contentType: 'mdx',
	fields: {
		title: { type: 'string', required: true },
		publishedAt: { type: 'string', required: true },
		summary: { type: 'string', required: true },
		image: { type: 'string', required: true },
		excerpt: { type: 'string', required: true }
	},
	computedFields
}))

const OtherPage = defineDocumentType(() => ({
	name: 'OtherPage',
	filePathPattern: '*.mdx',
	contentType: 'mdx',
	fields: {
		title: { type: 'string', required: true }
	},
	computedFields
}))

const contentLayerConfig = makeSource({
	contentDirPath: 'data',
	documentTypes: [Blog, OtherPage],
	mdx: {
		remarkPlugins: [remarkGfm, remarkParse, remarkRehype],
		rehypePlugins: [
			rehypeSlug,
			rehypeCodeTitles,
			rehypePrism,
			[
				rehypeAutolinkHeadings,
				{
					properties: {
						className: ['anchor']
					}
				}
			]
		]
	}
})

export default contentLayerConfig

Whenever I try to import something from rehype-prism-plus, it shows the error

ConfigReadError (..\blog\contentlayer.config.js): TypeError: Cannot read properties of undefined (reading 'source')

Not importing anything from rehype-prism-plus working fine.

[Timothy]

Try [rehypePrism, { ignoreMissing: true }],. It worked over here so I will hard to investigate the underlying issue.

[Timothy]

I upgraded my blog to contentlayer 0.2.1 and tried using rehypePrism as well with no issues. I suspect rehypeCodeTitles does not play well with the plugin. You could use my remarkCodeTitles in the above repository.