[ERROR] Could not resolve dependencies in Vercel

[imjeen]

Environment

• mdx-bundler version: 10.1.1
• node version: 22
• nextJs version: v15.3.3 (app router)

config

//  content by node fs read mdx file
async function getMarkdown(content: any, cwd: string) {
  const markdown = await bundleMDX({
    source: content,
    cwd,
    esbuildOptions: (options) => {
      return {
         ...options,
         bundle: true,
         platform: "node",
       };
     },
  });

  return markdown.code;
}

Issue

When an .mdx file imports a TSX component that itself relies on other dependencies,
mdx-bundler fails to resolve some of those imports — but only on Vercel.
Local development works without any issues.

Example MDX file:index.mdx

---
title: CSS :has() and :where() selector
---

import { ParallaxImageHero } from "./ParallaxImageHero";

<ParallaxImageHero />

some text

• ParallaxImageHero.tsx

import { motion, useScroll, useTransform } from "motion/react"; 
// ❌ ERROR on Vercel: mdx-bundler cannot resolve this import

export function ParallaxImageHero() { 
  return <motion.div> a component with motion</motion.div>
}

Behavior

Running the project locally works perfectly.
Deploying to Vercel results in server errors indicating that certain dependencies cannot be resolved.

Notes

Maybe the issue is that Vercel runs in a serverless environment, which behaves differently from a local Node.js server. But how can I fix this?

I’ve tried setting the esbuildOptions config, but it still fails every time