CODEWITHSUNDEEP
reactjsnext.js
user19666029
user19666029

Reputation:

_jsxDev is not a function when using MDXRemote

enter image description here

I am creating a blog using Next.js and mdx.

I began by following this entire tutorial. He made the blog using nextjs and md.

Then, I followed one part in this tutorial to switch from using md to mdx

However, the one line of code below is causing the error in the picture for some reason

 <MDXRemote {...props.mdxSource} components={components} />

entire code

import fs from 'fs'
import matter from 'gray-matter'
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'

import path from 'path'

export default function Post(props) {
    const components = {}

    return (
        <>
            // this line of code is causing error
            <MDXRemote {...props.mdxSource} components={components} />

        </>
    )
}

export async function getStaticProps(context) {    
    const markdownWithMeta = fs.readFileSync(
        path.join('posts', slug + '.mdx'),
        'utf-8'
    )
    const { content } = matter(markdownWithMeta)
    const mdxSource = await serialize(content)

    return {
        props: {            
            mdxSource,            
        },
    }
}

Package I'm using: https://github.com/hashicorp/next-mdx-remote

Upvotes: 5

Views: 4106

Answers (4)

Spencer5051
Spencer5051

Reputation: 1085

Instead of downgrading, you can use { development: false } as suggested in github issues.

  const mdxSource = await serialize(source, {
    mdxOptions: { development: false },
  });

https://github.com/hashicorp/next-mdx-remote/issues/324

Upvotes: 10

Xabier L
Xabier L

Reputation: 1

You need use npm run build & npm run start because you need to generate static pages

Upvotes: -3

Frostbourn
Frostbourn

Reputation: 340

It works if you force-downgrade @mdx-js to 2.1.5:

Add to you package.json:

yarn

"resolutions": {
    "@mdx-js/mdx": "2.1.5",
    "@mdx-js/react": "2.1.5"
},

npm

 "overrides": {
    "@mdx-js/mdx": "2.1.5",
    "@mdx-js/react": "2.1.5"
  }

Upvotes: 0

Mr razor
Mr razor

Reputation: 27

Same issue. Downgrade to "^3.0.8"

Upvotes: 0

Related Questions