nextApplication fails on vercel preview/production deploy

Help
1

Hi,

I’m reaching out with a weird error when deploying fumadocs next.js app to Vercel.

I am using @fumadocs/mdx-remote in server component which runs and renders absolutely fine in local production build. However, as soon as it is deployed in Vercel preview or production an error is raised.

The error that is raised is:

Application error: a client-side exception has occurred while loading <proj>-projects.vercel.app (see the browser console for more information).

The only information available in the minfied error from console is

Uncaught Error: Connection closed.
    at t (9077-e48bf21ea1184d6a.js:1:63331)
t @ 9077-e48bf21ea1184d6a.js:1


     n.read().then(function t(u) {
                var l = u.value;
                if (u.done)
                    U(e, Error("Connection closed."));
                else {
                    var a = 0

I am using compileMDX in the server component with the following simplified code below:

import { FC, ComponentType } from "react";
import { PostsSection } from "./postsSection";
import { PostCards, PostData } from "./postCards";
import { HeadingLevel } from "@/lib/types";
import { compileMDX } from "@fumadocs/mdx-remote";
import { Accordion, Accordions } from "fumadocs-ui/components/accordion";

const ErrorComponent: ComponentType<{ error: unknown }> = ({ error }) => (
  <p className="text-red-500 font-semibold">
    Error rendering introduction: {String(error)}
  </p>
);
ErrorComponent.displayName = "ErrorComponent";

interface PostSeriesProps {
  title: string;
  description: string;
  headingLevel?: HeadingLevel;
  introduction?: string;
  posts: PostData[];
}

export const PostSeries: FC<PostSeriesProps> = async ({
  title,
  description,
  headingLevel = "h2",
  introduction,
  posts,
}) => {
  let MdxContent: ComponentType | null = null;
  let error: unknown = null;

  if (introduction) {
    try {
      const compiled = await compileMDX({ source: "**Hello World**" });
      MdxContent = compiled.body as ComponentType;
    } catch (err) {
      error = err;
    }
  }

  return <p>Hello world</p>;
};

The line that raises the error is

const compiled = await compileMDX({ source: "**Hello World**" });

If that line is removed vercel deployment is happy.

I am posting on vercel for ideas why the error is raised on deployment but it works locally?

Also raised in fumadocs GitHub repo discussions (@fumadocs/mdx-remote vercel client exception: "Connection Closed" · fuma-nama/fumadocs · Discussion #1623 · GitHub)

2

Hi @dcs3spp, sorry that you are facing this issue. Can you please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.

3

Hi @anshumanb thanks for your help!

I have created a public GHub repo that replicates the issue.

It is deployed at Vercel here

Click on the Posts link in the navbar on the home page to trigger the error.

Issue raised on Fumadocs Q & A discussions also.

4

Answered here by fumadocs author.

Issue can be closed

1 Like