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

1. H2: JavaScript 语法兼容性问题 - 使用了真机 JavaScriptCore 不支持的 ES6+ 语法

• Observation Points: 检查可选链操作符 ?.、空值合并 ??、BigInt 等

1. H3: 某个页面或组件存在语法错误 - 特定文件的语法错误导致整个应用无法启动

• Observation Points: 检查最近修改的文件，特别是 works.vue

1. H4: 依赖包版本不兼容 - 某些 npm 包使用了不兼容真机的语法

• Observation Points: 检查 package.json 中的依赖版本

1. 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