Cannot compile mdxjsEsm node

[lancejpollard]

I am in Next.js with this config:

/** @type {import('next').NextConfig} */
import createMDXPlugin from '@next/mdx'
import rehypeRaw from 'rehype-raw'

const mdxConfig = {
  extension: /\.mdx?$/,
  options: {
    providerImportSource: '@mdx-js/react',
    rehypePlugins: [rehypeRaw],
    // If you use remark-gfm, you'll need to use next.config.mjs
    // as the package is ESM only
    // https://github.com/remarkjs/remark-gfm#install
    remarkPlugins: [],
  },
}

const withMDX = createMDXPlugin(mdxConfig)

const nextConfig = withMDX({
  compiler: {
    styledComponents: true,
  },
  pageExtensions: ['mdx', 'md', 'tsx', 'ts'],
  poweredByHeader: false,
  // reactStrictMode: true,
  trailingSlash: false,
})

export default nextConfig

I have installed the 3 modules listed here. I can successfully render some MDX content which I import into a next.js page. But when I try to load a pages/example.mdx file directly as a Next.js page, it throws this error:

error - ./pages/cellular-automata/index.mdx
Error: index.mdx:Error: Cannot compile `mdxjsEsm` node
    at new Promise (<anonymous>)

Searching the web for mdxjsEsm yields nothing, surprisingly.

All I have in my mdx file is this:

import Layout from '@components/kit/Layout'

export const meta = {
  url: '/cellular-automata',
  tab: 'Cellular Automata Notes @ Lance Pollard',
  keywords: ['cellular automata'],
}

export default ({ children }) => <Layout {...meta}>{children}</Layout>

Any ideas? Layout renders the Next.js head import NextHead from 'next/head', so maybe that is causing issues? I don't know, could use some help.

[lancejpollard]

If I change next.config.js to next.config.mjs, it now throws a different error:

Error: poem.md:Error: Cannot compile `mdxJsxFlowElement` node
    at new Promise (<anonymous>)
Import trace for requested module:
./contents/poem.md

[icyJoseph]

It's just how it is transforming the mdx file into JavaScript, either with ESM or CJS, but the underlying error is the same. I think anyway.

[icyJoseph]

Could you put some text content in the mdx file and try again?

[lancejpollard]

Same error if I have this:

import Layout from '@components/kit/Layout'

export const meta = {
  url: '/cellular-automata',
  tab: 'Cellular Automata Notes @ Lance Pollard',
  keywords: ['cellular automata'],
}

I am text.

export default ({ children }) => <Layout {...meta}>{children}</Layout>

[wooorm]

Remove rehype-raw, rehype-raw has quite specific complex use cases, you don’t indicate that you need it.

[lancejpollard]

I'm getting quite frustrated with MDX, it's taken hours to get a hello-world example working in Next.js, and now it seems like there are more problems (vercel/next.js#44883), but first I'd like to see us get past this current one which we've been discussing here.

[lancejpollard]

When I wasn't using rehype-raw, the poem (which has HTML in it) rendered empty. Any ideas on that then?

[wooorm]

To use an .mdx extension and to use the MDX format: https://mdxjs.com/docs/what-is-mdx/#mdx-syntax

[wooorm]

I'm getting quite frustrated with MDX

Sad that you are having trouble. But this is open source. You get this code for free, whether it works or not. You even get people that try to help you, but the dynamics with that are that there are 100s of people that ask questions about 100s of project, and only very few maintainers. It doesn’t work if you and I spend equal time on a question. The only way this can work is if you spend a lot of time reading the docs and on composing your questions: what have you tried? What versions are you on? What are you actually trying to do? Why use MDX when you have plain markdown instead of MDX? Otherwise I have to ask these things.

---

When I wasn't using rehype-raw, the poem (which has HTML in it) rendered empty. Any ideas on that then?

Please reduce the test case, and show the file you mean?

[hahnbeelee]

Why not use MDX?
What are you suggesting then? I don't follow.

Change your files from poem.md and description.md to poem.mdx and description.mdx

[remcohaszing]

It appears you’re trying to load both markdown and MDX files. You want to use a rehype plugin for markdown files, but not for MDX. This is possible by specifying two distinct MDX integrations, one for markdown, and one for MDX.

import createMDXPlugin from '@next/mdx'
import rehypeRaw from 'rehype-raw'

const withMDX = createMDXPlugin({
  extension: /\.mdx$/,
  options: {
    // These options apply to .mdx fles only
    providerImportSource: '@mdx-js/react',
    rehypePlugins: [],
    remarkPlugins: [],
  },
})

const withMarkdown = createMDXPlugin({
  extension: /\.md$/,
  options: {
    // These options apply to .md fles only
    providerImportSource: '@mdx-js/react',
    rehypePlugins: [rehypeRaw],
    remarkPlugins: [],
  },
})

const nextConfig = withMDX(withMarkdown({
  compiler: {
    styledComponents: true,
  },
  pageExtensions: ['mdx', 'md', 'tsx', 'ts'],
  poweredByHeader: false,
  // reactStrictMode: true,
  trailingSlash: false,
}))

export default nextConfig

[lancejpollard]

Not sure.

My minimal example is my fresh blog here https://github.com/lancejpollard/lancejpollard.com, there's not much there yet.

I changed it to use the markdown style list syntax with <br/> to separate the lists, and it works for now. So I dunno.

[wooorm]

• That’s not very minimal 😅
• I don’t know what to do to experience your problems, what should I do?

[wooorm]

• There are no .mdx files?
• What is @contents?

[wooorm]

• Looking at dev tools, there clearly are lists and items? You just didn’t style them?

[wooorm]

Ok so that’s it, you removed all styles, but it’s working fine.