neptune-privacy/TAURI_WASM_FIX.md

174 lines
4.3 KiB
Markdown
Raw Normal View History

2025-11-27 18:46:17 +07:00
# Tauri + WASM Integration Fix
## 🔍 Problem
WASM works in browser (`npm run dev`) but fails in Tauri webview (`npm run tauri:dev`) with error:
```
Cannot assign to read only property 'toString' of object '#<AxiosURLSearchParams>'
```
## ✅ Solutions Applied
### 1. **CSP (Content Security Policy) Update**
**File:** `src-tauri/tauri.conf.json`
Added required CSP directives for WASM:
```json
{
"security": {
"csp": {
"default-src": "'self' 'unsafe-inline' asset: https://asset.localhost",
"script-src": "'self' 'unsafe-inline' 'unsafe-eval' 'wasm-unsafe-eval'",
// ... other directives with asset: protocol
},
"assetProtocol": {
"enable": true,
"scope": ["**"]
}
}
}
```
**Key changes:**
- ✅ Added `'wasm-unsafe-eval'` to `script-src` - **REQUIRED for WASM execution in Tauri 2.x**
- ✅ Added `asset:` and `https://asset.localhost` to relevant directives
- ✅ Enabled `assetProtocol` to serve assets with proper MIME types
### 2. **Vite Config Update**
**File:** `vite.config.ts`
```typescript
export default defineConfig({
optimizeDeps: {
exclude: ['@neptune/native'], // Only exclude native module
// ❌ NOT excluding @neptune/wasm - it must be bundled!
},
build: {
assetsInlineLimit: 0, // Don't inline WASM as base64
},
assetsInclude: ['**/*.wasm'], // Serve WASM with correct MIME type
})
```
**Key changes:**
- ✅ Removed `@neptune/wasm` from `exclude` and `external`
- ✅ Added `assetsInlineLimit: 0` to prevent base64 encoding
- ✅ Added `assetsInclude` for WASM MIME type
### 3. **Package.json Fix**
```json
{
"dependencies": {
"axios": "^1.7.9" // Fixed from invalid "1.13.2"
}
}
```
## 🧪 Testing
### 1. Browser (Should work)
```bash
npm run dev
```
Open http://localhost:5173/auth → Create wallet → Should work
### 2. Tauri (Should work now)
```bash
npm run tauri:dev
```
Create wallet → Should work without CSP/WASM errors
## 🐛 Additional Debugging
### If WASM still doesn't load:
#### Check 1: WASM File in Dist
```bash
npm run build
ls dist/assets/*.wasm # Should see neptune_wasm_bg-*.wasm
```
#### Check 2: Browser DevTools (in Tauri)
1. Open Tauri app
2. Right-click → Inspect Element
3. Console tab → Check for errors
4. Network tab → Filter `.wasm` → Check if WASM loads (200 status)
#### Check 3: CSP Errors
In DevTools Console, look for:
```
Refused to execute WebAssembly script...
```
If you see this → CSP is still blocking WASM
### Temporary Debug: Disable CSP
If nothing works, temporarily disable CSP to isolate the issue:
```json
// src-tauri/tauri.conf.json
{
"security": {
"dangerousDisableAssetCspModification": true, // Disable CSP temporarily
"csp": null // Remove CSP entirely for testing
}
}
```
⚠️ **WARNING:** Only use this for debugging! Re-enable CSP for production.
## 📝 Why This Happens
### Tauri vs Browser Differences
| Feature | Browser | Tauri Webview |
|---------|---------|---------------|
| CSP | Permissive by default | Strict by default |
| WASM | Always allowed | Needs `'wasm-unsafe-eval'` |
| Asset loading | HTTP(S) | Custom `asset://` protocol |
| MIME types | Auto-detected | Must be configured |
### WASM Loading in Tauri
1. Vite bundles WASM file → `dist/assets/neptune_wasm_bg-*.wasm`
2. Tauri serves it via `asset://localhost/assets/...`
3. CSP must allow:
- `script-src 'wasm-unsafe-eval'` → Execute WASM
- `connect-src asset:` → Fetch WASM file
4. AssetProtocol must serve with `Content-Type: application/wasm`
## 🔄 Next Steps After Fix
### 1. Test Full Wallet Flow
- ✅ Generate wallet (WASM)
- ✅ Display seed phrase
- ✅ Confirm seed phrase
- 🚧 Create keystore (needs Tauri commands)
### 2. Implement Tauri Commands
See `TAURI_COMMANDS_TODO.md` (if it exists, otherwise create it)
### 3. Build & Test Production
```bash
npm run tauri:build
```
## 📚 References
- [Tauri CSP Documentation](https://tauri.app/v2/reference/config/#securityconfig)
- [Vite WASM Plugin](https://vitejs.dev/guide/features.html#webassembly)
- [wasm-bindgen with Vite](https://rustwasm.github.io/wasm-bindgen/reference/deployment.html)
## 🎯 Summary
**Problem:** Tauri CSP blocked WASM execution
**Solution:** Add `'wasm-unsafe-eval'` + `asset:` protocol + proper Vite config
**Status:** Should work now! 🚀