# Debug Session: uniapp-white-screen

**Status:** [OPEN]
**Created:** 2026-05-28

## Problem Description

UniApp 真机运行报错白屏：
```
reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack -> 
  at s (app-service.js:15:401) 
  at  (app-service.js:942:153013) 
  at  (app-service.js:1041:51133)
```

## Environment
- Platform: UniApp
- Target: Android/iOS App
- Build Tool: Vite

## Hypotheses

1. **H1: SCSS/预处理器配置问题** - `modern-compiler` API 不兼容真机环境
   - Status: Tested, changed to `legacy`, issue persists

2. **H2: JavaScript 语法兼容性问题** - 使用了真机 JavaScriptCore 不支持的 ES6+ 语法
   - Observation Points: 检查可选链操作符 `?.`、空值合并 `??`、BigInt 等

3. **H3: 某个页面或组件存在语法错误** - 特定文件的语法错误导致整个应用无法启动
   - Observation Points: 检查最近修改的文件，特别是 works.vue

4. **H4: 依赖包版本不兼容** - 某些 npm 包使用了不兼容真机的语法
   - Observation Points: 检查 package.json 中的依赖版本

5. **H5: 构建产物损坏或缓存问题** - 需要清除缓存重新构建
   - Observation Points: 检查 dist 目录和构建日志

## Evidence Log

### Step 1: Initial Analysis
- File works.vue structure appears valid
- Template tags properly closed
- SCSS configuration changed from `modern-compiler` to `legacy`

### Step 2: ES6+ Syntax Check
**FOUND ISSUE**: Project uses extensive ES2020 syntax that is not supported in older JavaScriptCore:
- Optional chaining (`?.`) - found 100+ occurrences
- Nullish coalescing (`??`) - found 50+ occurrences

**Files with problematic syntax:**
- `src/store/modules/user.ts`
- `src/utils/versionUpgrade.js`
- `src/pages/sales/salesQuotation/*.vue`
- `src/pages/productionManagement/**/*.vue`
- `src/pages/oa/_utils/*.js`
- Many more...

### Step 3: Fix Applied
Updated `vite.config.js` to set build target to ES2015 to ensure proper transpilation of ES2020 syntax.

### Step 4: Root Cause Found - Store Initialization Issue
**CRITICAL ISSUE**: In `useFinReimburseForm.js`, `useUserStore()` was called at module level (line 37), which causes Pinia store initialization before Vue app context is ready.

**This is the main cause of `createInstanceContext failed` error!**

### Step 5: Fix Applied
- Modified `useFinReimburseForm.js` to use lazy initialization pattern
- Store is now created only when `getUserStore()` is called within function scope

## Summary of All Fixes
1. ✅ vite.config.js - SCSS api changed to `legacy`
2. ✅ vite.config.js - Build target set to `es2015`
3. ✅ App.vue - Changed `<div>` to `<view>`
4. ✅ user.ts - Fixed optional chaining syntax
5. ✅ versionUpgrade.js - Fixed optional chaining and nullish coalescing syntax
6. ✅ useFinReimburseForm.js - Fixed store initialization timing

## Next Steps
1. Clear build cache: `rd /s /q dist`
2. Rebuild and test on real device
3. If still failing, check for other module-level store calls