Preact路由懒加载开发正常，执行preact build打包报错如何解决？

云原生阿岚

2026-10-3

错误原因

该报错由Preact CLI默认开启的**预渲染（Prerender）**机制导致：
preact build默认会在服务端预渲染所有页面的静态HTML，你使用的lazy()懒加载组件会返回Promise对象，预渲染阶段组件未完成加载，模板引擎无法解析Promise类型的返回值，就会抛出这个错误。
本地开发环境不会执行预渲染逻辑，因此运行完全正常。

解决方案

方案1：不需要预渲染的场景，直接在打包时关闭预渲染即可，执行命令：
```
preact build --no-prerender
```
也可以在项目根目录的preact.config.js中添加配置永久关闭：
```
export default {
  prerender: false
}
```

方案2：需要保留预渲染的场景，将懒加载组件包裹在仅客户端渲染的逻辑中，自己实现一个简单的ClientOnly组件：

// components/ClientOnly.js
import { useState, useEffect } from 'preact/hooks';

const ClientOnly = ({ children, fallback = null }) => {
  const [isClient, setIsClient] = useState(false);
  useEffect(() => setIsClient(true), []);
  return isClient ? children : fallback;
}

export default ClientOnly;

然后修改你的form-page.js代码，用该组件包裹Suspense部分：

import ClientOnly from '../components/ClientOnly';
// 其余导入不变

const FormPage = () => {
    const classes = useStyles();
    return (
        <Grid container justifyContent="center" className={classes.root}>
            <ClientOnly fallback={<Grid item xs={10} className={classes.suspense}>Loading ...</Grid>}>
                <Suspense fallback={<Grid item xs={10} className={classes.suspense}>Loading ...</Grid>}>
                   <Form/>
                </Suspense>
            </ClientOnly>
        </Grid>
    )
};