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

[to-abhinav]

can anyone help me with this error

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

_mdx_bundler_entry_point-b428ea12-9f87-4e9f-8cb2-56953d0575dd.mdx:0:0:
  0 │ ---
    ╵ ^

here is my package.json
"scripts": {
"dev": "next dev ",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"engines": {
"node": "22.12.0",
"npm": "11.0.0"
},
"dependencies": {
"@material-tailwind/react": "^2.1.10",
"@nextui-org/accordion": "^2.2.5",
"@nextui-org/navbar": "^2.2.5",
"@nextui-org/react": "^2.6.8",
"@react-three/fiber": "^8.17.9",
"@tailwindcss/typography": "^0.5.15",
"axios": "^1.7.7",
"clsx": "^2.1.1",
"contentlayer2": "^0.5.3",
"date-fns": "^4.1.0",
"dotenv": "^16.4.5",
"framer-motion": "^11.15.0",
"github-slugger": "^2.0.0",
"lucide-react": "^0.453.0",
"mongoose": "^8.7.0",
"next": "14.2.13",
"next-contentlayer2": "^0.5.3",
"next-themes": "^0.4.4",
"react": "^18",
"react-dom": "^18",
"react-fast-marquee": "^1.6.5",
"react-icons": "^5.3.0",
"reading-time": "^1.5.0",
"rehype-autolink-headings": "^7.1.0",
"rehype-highlight": "^7.0.1",
"rehype-pretty-code": "^0.14.0",
"rehype-slug": "^6.0.0",
"remark-gfm": "^3.0.1",
"sass": "^1.83.0",
"shiki": "^1.24.2",
"simplex-noise": "^4.0.3",
"styled-components": "^6.1.13",
"tailwind-merge": "^2.5.5",
"three": "^0.169.0"
},
"devDependencies": {
"eslint": "^8",
"eslint-config-next": "14.2.13",
"postcss": "^8",
"tailwindcss": "^3.4.1"
}
}

[alberduris]

I had this issue and it’s indeed resolved just with the upgrade instructions.

Curiosuly enough, the error is related to the remark and rehype packages. You just need to follow this section of the instructions: Upgrading incompatible Remark and Rehype packages.

In my case, I only had to update these two versions in my package.json:

    "remark": "^14.0.3",  
    "remark-gfm": "^3.0.1",  

To these:

    "remark": "15.0.1",  
    "remark-gfm": "4.0.0",  

That solved the issue.

I consider this particular issue should be closed and marked as resolved. Perhaps a note could be added to the upgrade guide indicating that if the plugin @mdx-js/esbuild error appears, it’s actually related to the remark/rehype packages—even though it might not seem like it at first.