# bolt.diy 预览空白排查：分开看依赖、启动命令与运行错误

本包在本机 Node 实际复现三类故障并执行修复；未运行 bolt.diy/WebContainer，图中文字来自真实本机日志，不是工具终端截图。

## 本地运行

需要 Node.js 20+，本参考工程没有 npm 第三方运行依赖。

```sh
npm ci --ignore-scripts
npm run check
npm run dev
```

服务只绑定 127.0.0.1:8456；修改端口可运行 `PORT=8457 npm run dev`。W03 与 W11 包含随包本地 React 18.3.1 UMD 运行库及许可，前者 hash 路由不需要服务器路径回退。

## 七步操作

### 1. 复制故障样本并保留第一条错误

broken-dependency.mjs 引入不存在的包，broken-start/package.json 缺少 dev，broken-runtime.mjs 访问 undefined 字段。它们是专门构造的原创负例，不是从真实用户项目采集。

```sh
node reproduce.mjs
```

### 2. 确认预览服务是否真的启动

从启动命令开始：没有 dev 脚本时 npm run dev 会在提供页面前退出。先核对 package.json，不在浏览器里反复刷新来修复服务未启动。本题的原始 stderr 保存在 logs/start.txt。

```sh
npm --prefix broken-start run dev
```

### 3. 将缺失依赖与网络失败分开

MODULE_NOT_FOUND 指向缺失的示例包，不自动说明网络不可用。真实项目先核对依赖声明、锁文件、安装退出码，再检查版本或镜像；不随意清空全部锁文件。

```sh
node broken-dependency.mjs
```

### 4. 定位运行时的具体源码行

TypeError 出现在 broken-runtime.mjs 的 profile.name。先检查数据为空时的渲染分支，再给出明确空状态；把整个页面包进 catch 并隐藏错误不能完成修复。

```sh
node broken-runtime.mjs
```

### 5. 每次只修复一个原因

fixed-dependency.mjs 使用随包的本地模块，fixed-start/package.json 增加可运行 dev，fixed-runtime.mjs 使用显式空状态。reproduce.mjs 检查三例原始退出码非零、修复后为零，并保存真正输出。

```sh
node reproduce.mjs
```

### 6. 返回 bolt.diy 对照相同证据

在实际 WebContainer 中区分安装日志、启动日志、终端端口和浏览器错误。本文 FAQ 引用官方排查入口；本机的三个例子仅训练诊断顺序，不声称覆盖沙箱、跨域和所有兼容问题。

### 7. 回读原页面而不是只看命令退出

本题恢复参考页显示三个故障的实际验证摘要。真实应用修好后要回到同一路由检查数据和交互，不能把 npm 退出 0、HTTP 200 或白色截图单独当完整恢复证明。

```sh
npm run dev
```

## 输入与许可

虚构业务、客户、活动及几何插图均为本站原创教学输入；参考源码采用 MIT（见 LICENSE）。不是 Dyad/bolt.diy/screenshot-to-code UI 或模型输出。不包含真实 API 密钥、账号、发布 URL 或客户资料。

官方依据：
- https://github.com/stackblitz-labs/bolt.diy/blob/main/FAQ.md

查询词仅为任务意图，不是已验证 Google 月搜索量或抖音指数。