本地构建正常但Vercel报错：页面无有效React默认导出

问题详情 #

• 本地执行blitz build可正常完成构建与运行，日志显示编译成功、静态页面生成流程正常
• 通过Vercel CLI或官方平台执行vercel build时，触发错误：

  Build optimization failed: found pages without a React Component as default export in pages/projects/gug、pages/projects/maboibart、pages/projects/sauce

• 涉事页面均已正确导出React组件，示例代码如下：

import Image from 'next/image'
import styles from 'styles/sauce.module.sass'
import chud from "styles/chud.module.sass"
import { serialize } from 'next-mdx-remote/serialize'
import { MDXRemote } from 'next-mdx-remote'
import { promises as fs } from 'fs'
import path from 'path'
import CluckHUD from 'app/core/components/CluckHUD'

export default function sauce({ source }: { source: any }) {
    return (
        <main className={styles.main}>
            <CluckHUD theme={chud.Forest} />
            <div className={styles.cont}>
                <div className={styles.hentWrap}>
                    <Image
                        src="/hentieSolid.png"
                        alt="bart"
                        height="100"
                        width="100"
                        layout="fixed"
                        className={styles.portrait}
                    />
                    <h1 className={styles.title}>Whatever This Place Is</h1>
                </div>

                <div className={styles.content}>
                    <MDXRemote {...source} components={components} className={styles.mdx} />
                </div>
            </div>
        </main>
    );
}

const components = {}

export async function getStaticProps() {
    const mdPath = await path.join(process.cwd(), 'public/markdown/sauce.mdx');
    const rawMarkdown = await fs.readFile(mdPath, 'utf8');
    const postMd = await serialize(rawMarkdown);

    return { props: { source: postMd } }
}

排查与解决方法 #

1. 修正异步操作错误
   path.join是同步方法，不需要加await，这个错误会导致mdPath变成Promise对象，引发构建异常进而让Vercel误判组件导出。修改getStaticProps中的路径拼接代码：

   export async function getStaticProps() {
       // 移除await，path.join是同步方法
       const mdPath = path.join(process.cwd(), 'public/markdown/sauce.mdx');
       const rawMarkdown = await fs.readFile(mdPath, 'utf8');
       const postMd = await serialize(rawMarkdown);
   
       return { props: { source: postMd } }
   }
   

2. 检查文件扩展名
   确保涉事页面文件的扩展名是.jsx或.tsx，Vercel对Next.js/Blitz.js页面的扩展名识别更严格，纯.js文件可能被构建工具误判为非React组件文件。

3. 对齐依赖版本
   在项目根目录提交package-lock.json或yarn.lock文件，确保Vercel构建环境安装的依赖版本与本地完全一致，避免因版本差异导致的构建逻辑不一致。

4. 调整变量定义顺序
   将components变量移到组件定义之前，避免部分构建工具因解析顺序问题无法识别组件依赖：

   const components = {}
   
   export default function sauce({ source }: { source: any }) {
       // ...组件代码
   }
   

内容的提问来源于stack exchange，提问作者Aidan Sharp