Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

error - SyntaxError: Unexpected token '<' #180

Closed
skagur-k opened this issue Apr 16, 2022 · 4 comments
Closed

error - SyntaxError: Unexpected token '<' #180

skagur-k opened this issue Apr 16, 2022 · 4 comments

Comments

@skagur-k
Copy link

skagur-k commented Apr 16, 2022

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
Copy link
Collaborator

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
Copy link
Author

skagur-k commented Apr 16, 2022

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.

image

@schickling
Copy link
Collaborator

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:

image

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

@HoverBaum
Copy link

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 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants