我正在开发 Vite/React 应用。有一个 CI 流程，它运行以下命令并将 dist 包推送到 S3 存储桶。

vite build --mode production

我最近注意到我所做的提交导致应用程序“白屏”。React 未呈现“App”组件（例如在 main.tsx 中）：

const container = document.getElementById('root');
const root = createRoot(container!);
root.render(
    <React.Suspense fallback={<></>}>
        <React.StrictMode>
            <ProSidebarProvider>
                <BrowserRouter>
                    <App/>
                </BrowserRouter>
                ...

查看空白页时，打开控制台日志，我看不到任何堆栈跟踪。React 开发工具清楚地看到 React 使用生产版本运行。我尝试添加错误边界，但没有成功。我不确定如何调试哪个错误导致组件无法呈现。

我能够在本地重现此问题。如果我运行上面的构建命令，然后运行以下命令：

vite preview

我可以在 localhost:4173 上看到白页。奇怪的是，如果我运行以下命令：

vite dev

我能够在 localhost:5173 上完美运行该应用程序。

来自 package.json 的依赖项

{
"react": "^18.2.0",
"vite": "^4.0.3",
"@vitejs/plugin-react": "^3.0.0",
}

我的 Vite 配置：

import {defineConfig} from "vite";
import react from '@vitejs/plugin-react'

export default ({mode}) => {
    return defineConfig({
        plugins: [
            react(),
        ],
        base: './',
        build: {
            target: 'esnext',
        },
    });
};

如果在上面的代码（来自 main.tsx）中我将

<App />

替换为

<h1>它可以工作</h1>

这在端口 4173 和 5173 上完美呈现。问题是试图找到有关为什么无法呈现 App 组件的诊断信息。