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]Cannot process MDX file with esbuild #223

Open
jialouluos opened this issue Dec 20, 2023 · 8 comments
Open

[error]Cannot process MDX file with esbuild #223

jialouluos opened this issue Dec 20, 2023 · 8 comments

Comments

@jialouluos
Copy link

v10.0.1 bug?

import remarkGFM from 'remark-gfm';
const { code} = await bundleMDX({
		source: source.replaceAll(/\$.*(?<val>[\>\=\<]+).*\$/gm, `{'$<val>'}`),
		mdxOptions(options) {
			options.remarkPlugins = [
				...(options.remarkPlugins ?? []),
				remarkGFM,
			];
			options.rehypePlugins = [...(options.rehypePlugins ?? [])];
			return options;
		},
	});

show:Cannot process MDX file with esbuild [plugin @mdx-js/esbuild]

version @9 is running properly

@bjarkebech
Copy link

I had this same error today.

I'm using Remix and had mdx-bundler inside serverDependenciesToBundle in remix.config.js, which was required for v9.x.

Removing it again fixed the issue.

I.e.:

//remix.config.js
serverDependenciesToBundle: [
  /^mdx-bundler.*/", // remove this entry
],

@jialouluos
Copy link
Author

I had this same error today.

I'm using Remix and had mdx-bundler inside serverDependenciesToBundle in remix.config.js, which was required for v9.x.

Removing it again fixed the issue.

I.e.:

//remix.config.js
serverDependenciesToBundle: [
  /^mdx-bundler.*/", // remove this entry
],

I removed remark-gfm and it worked, but I need remark-gfm

@jialouluos
Copy link
Author

Does the gfm plugin for mdx-bundler(v10) exist in error handling for backquotes? The gfm plugin for mdx-bundler(v9) handles backquotes correctly

@bjarkebech
Copy link

We're using remark-gfm in production as well with no issues - are you using [email protected] and [email protected]?

Here's our full serverDependenciesToBundle - maybe it will work for you 🤞🏻

serverDependenciesToBundle: [
    // MDX:
    /^rehype.*/,
    /^remark.*/,
    /^unified.*/,
    /^unist.*/,
    /^mdast.*/,
    /^micromark.*/,
    "devlop",
    "ccount",
    "markdown-table",
    "zwitch",
    "fault",
    "decode-named-character-reference",
    "longest-streak",
    "character-entities",
  ],

@airtonix
Copy link

airtonix commented Feb 26, 2024

getting this error when trying to using:

  • astro (i dont think this part matters)
  • remark-shiki-twoslash, or
  • remark-shaku-code-annotate

import {bundleMDX} from 'mdx-bundler'
import { readSync } from 'to-vfile'

import remarkShikiTwoslash from 'remark-shiki-twoslash'

const mdxSource = readSync(`src/components/thing.md`)


const result = await bundleMDX({
  source: mdxSource.toString(),
  mdxOptions (options) {
    options.remarkPlugins = [
       [remarkShikiTwoslash, { theme: "dark-plus" }]
    ]
    return options
  }
  
})

const {code, frontmatter} = result

export { code, frontmatter }

https://github.com/airtonix/shaku-astro-mdxbundler-bug-223

@hxlhxl
Copy link

hxlhxl commented Nov 7, 2024

I came to this problem when I write the ill mermaid graph code like this

```mermaid
a -> b
```

after a deep look at the mdx-mermaid plugin process logic

image

I got no error but the undefined empty result of this function.
It occured to me that maybe something wrong with my mermaid code.
After I chagned to the correct code.

```mermaid
graph TD;
    A-->B;
```

Error disappeard

@gautamankoji
Copy link

solution: fixing TypeError: Cannot set properties of undefined (setting 'inTable') in next.js

issue overview

the error occurs when using remark-gfm with next.js, either in the pages router or the app router, the root cause is a version mismatch between remark-gfm and other markdown-related dependencies, such as code highlighters and markdown converters

solution

to resolve this issue, downgrade remark-gfm to a compatible version, instead of using:

"remark-gfm": "^your_version"

downgrade to version 3.0.1:

npm install [email protected]

or for yarn:

after installing the compatible version, restart your development server:

rm -rf .next node_modules package-lock.json yarn.lock
npm install
npm run dev

@remarkjs could you investigate this issue

root cause

the error occurs because mdast-util-gfm-table, a dependency of remark-gfm, is expecting a structure that is not properly defined due to version conflicts, downgrading to version 3.0.1 ensures compatibility with contentlayer and other related markdown utilities

if you encounter similar issues when using mdx or other markdown-based tools in next.js, always verify the compatibility of your markdown processor versions (remark-* packages, rehype-*, contentlayer, etc)

@yehjxraymond
Copy link

Had the same issue today, and went deep down the rabbit hole trying every suggestions here and even pinning certain package version like remark-gfm and mdx-bundler manually.

I found out later when I was on the verge of setting everything on fire and move out of mdx that the error happens when I accidentally deleted an entire folder of images several commits ago.

So yes... check if it could be missing images.

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

6 participants