error - SyntaxError: Unexpected token '<'

[skagur-k]

The .mdx.json file generated includes "body": { "raw": " ", "html": " "} .

The expected object to be generated is "body": { "raw": " ", "code": " "} , according to the example.

contentlayer.config.ts

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

export default makeSource({
	contentDirPath: 'data',
	documentTypes: [Blog],
	mdx: {
		remarkPlugins: [],
		rehypePlugins: [rehypePrism],
	},
})

Passing the generated .mdx.json file to useMDXComponent(source.body.html) spits out the following error:

SyntaxError: Unexpected token '<'
    at new Function (<anonymous>)
    at getMDXComponent (file:///home/skagur/skagur.dev/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:18:14)
    at file:///home/skagur/skagur.dev/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:30
    at Object.useMemo (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:4961:19)
    at Object.useMemo (/home/skagur/skagur.dev/node_modules/react/cjs/react.development.js:1645:21)
    at useMDXComponent (file:///home/skagur/skagur.dev/node_modules/next-contentlayer/src/hooks/useMDXComponent.ts:23:16)
    at Post (webpack-internal:///./src/pages/blog/[...slug].js:29:96)
    at renderWithHooks (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5448:16)
    at renderIndeterminateComponent (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5521:15)
    at renderElement (/home/skagur/skagur.dev/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5736:7)

[schickling]

Thanks for opening this issue. Can you please provide a reproduction repo with instructions how to reproduce the problem you're experiencing? Thank you!

[skagur-k]

Thanks for opening this issue. Can you please provide a reproduction repo with instructions how to reproduce the problem you're experiencing? Thank you!

Please refer to the reproduced repo: REPO

Getting Started guide from https://www.contentlayer.dev/docs/getting-started was referenced to reproduce the problem.

npm run dev this repo and navigate to Lorem Ipsum link at index to reproduce the error.

[schickling]

Thanks for the repro and apologies for the inconvenience. Looks like you're missing the contentType: 'mdx' option in defineDocumentType (which defaults to markdown). Once you've set contentType: 'mdx' you'll be able to use useMDXComponent(post.body.code).

From docs:

Note: I'm also planning to display a warning for situations like these in the future #183

[HoverBaum]

Just wanna drop a line that this was super helpful!

I was following a project that used an older version of contentlayer and was confused about how setting bodyType: 'mdx', didn't get me the .code property.
But super easily found this issue that helped me solve it 👍