174 lines
4.3 KiB
Markdown
174 lines
4.3 KiB
Markdown
|
|
# 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! 🚀
|
||
|
|
|