I have followed the advice on this webpage
https://bitfrit.com/how-to-use-sqlite-with-electron/
but I am still having issues when I reload my page to refresh the window. When I start the page for the first time, running npm start everything works. When I refresh/reload the page I get the following error
FATAL ERROR: Error::Error napi_create_reference
1: 00007FF6822A45C6 node::Buffer::New+45414
2: 00007FF6822A4789 node::Buffer::New+45865
3: 00007FF6822A45F9 node::Buffer::New+45465
4: 00007FF683108F15 napi_fatal_error+149
5: 00007FFA0E941F3C
6: 00007FFA0E941CF7
7: 00007FFA0E955D3B
8: 00007FF68310AC26 napi_ref_threadsafe_function+1254
9: 00007FF6831262FC uv_translate_sys_error+2380
10: 00007FF6822C4163 uv_run+307
11: 00007FF68228D0D7 node::EmitAsyncDestroy+85607
12: 00007FF68228D4B6 node::EmitAsyncDestroy+86598
13: 00007FF68227695D node::FreeEnvironment+13
14: 00007FF67F6159D8 v8::OutputStream::WriteHeapStatsChunk+130520
15: 00007FF682179A65 IsSandboxedProcess+2179013
16: 00007FF68398219F uv_fs_poll_getpath+8729887
17: 00007FF682C908B3 GetHandleVerifier+9953331
18: 00007FF682D15071 GetHandleVerifier+10495985
19: 00007FF682C7C236 GetHandleVerifier+9869750
20: 00007FF682D93494 GetHandleVerifier+11013140
21: 00007FF682D92F05 GetHandleVerifier+11011717
22: 00007FF682D1D1CE GetHandleVerifier+10529102
23: 00007FF682D1F908 GetHandleVerifier+10539144
24: 00007FF6820285CE IsSandboxedProcess+797486
25: 00007FF68216B4E4 IsSandboxedProcess+2120260
26: 00007FF6821840DC IsSandboxedProcess+2221628
27: 00007FF682183F32 IsSandboxedProcess+2221202
28: 00007FF68216AA04 IsSandboxedProcess+2117476
29: 00007FF682F40725 GetHandleVerifier+12770981
30: 00007FF67FF99BD1 std::__1::vector<v8::CpuProfileDeoptFrame,std::__1::allocator<v8::CpuProfileDeoptFrame> >::vector<v8::CpuProfileDeoptFrame,std::__1::allocator<v8::CpuProfileDeoptFrame> >+1643473
31: 00007FF682F40CDA GetHandleVerifier+12772442
32: 00007FF681BB499A uv_cond_signal+1217946
33: 00007FF6823FAD74 GetHandleVerifier+951540
34: 00007FF6823F9061 GetHandleVerifier+944097
35: 00007FF681A5BCBC uv_mutex_unlock+2521420
36: 00007FF68230BCE4 uv_gettimeofday+278804
37: 00007FF68230B9C8 uv_gettimeofday+278008
38: 00007FF6822FC23B uv_gettimeofday+214635
39: 00007FF68230C2DE uv_gettimeofday+280334
40: 00007FF681A45B6C uv_mutex_unlock+2430972
41: 00007FF68218B994 IsSandboxedProcess+2252532
42: 00007FF680E382E1 v8_inspector::V8StackTraceId::ToString+5677153
43: 00007FF681FCBB0B IsSandboxedProcess+417899
44: 00007FF6800CCDEE v8::CpuProfilingOptions::max_samples+784398
45: 00007FF67F4A149F Ordinal0+5279
46: 00007FF68553EE12 uv_random+16903298
47: 00007FFA2FCD7034 BaseThreadInitThunk+20
48: 00007FFA310FCEC1 RtlUserThreadStart+33
Currently I have the following index.js
index.js
const electron = require("electron");
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow;
var mysql = require('mysql');
const url = require('url');
const path = require('path');
app.on('ready', function() {
mainWindow = new BrowserWindow({
width: 1200,
height: 800,
'minWidth': 480,
title:"DVD Library",
webPreferences: {nodeIntegration: true}
})
mainWindow.on('closed', function() {
mainWindow = null;
});
mainWindow.loadURL(url.format({
pathname: path.join(__dirname, "index.html"),
protocol: 'file:',
slashes: true
}));
mainWindow.toggleDevTools();
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script>let $ = require('./node_modules/jquery');</script>
<script>require('./node_modules/popper.js');</script>
<script>require('./node_modules/bootstrap');</script>
</head>
<body>
<form>
<div id="dvdlist" class="container">
</div>
</form>
</body>
<script>
const electron = require("electron");
var sqlite3 = require('sqlite3').verbose();
var db = new sqlite3.Database('dvds.db');
var dbRows;
GetSQL();
function GetSQL()
{
db.all("SELECT * FROM DVDS", (err, rows) => {
if (err){
}
PaintData(rows);
db.close();
});
}
function PaintData(rows)
{
var str = "<div class='table-responsive'>";
str += "<table class='table table-sm table-striped'>";
str += "<tr>";
str += "<th>Title</th>";
str += "<th>Category</th>";
str += "<th>Catalog ID</th>";
str += "</tr>";
for(var i in rows){
str += "<tr>";
str += "<td>"+rows[i].Title+"</td>";
str += "<td>"+rows[i].Category+"</td>";
str += "<td>"+rows[i].CatalogID+"</td>";
str += "</tr>";
}
str += "</table></div>";
$("#dvdlist").html(str)
}
</script>
</html>
package.json
{
"name": "dvds",
"version": "1.0.0",
"description": "DVD library",
"main": "index.js",
"scripts": {
"start": "electron .",
"package-mac": "electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/mac/icon.icns --prune=true --out=release-builds",
"package-win": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=win32 --arch=ia32 --icon=assets/icons/win/icon.ico --prune=true --out=release-builds --version-string.CompanyName=CE --version-string.FileDescription=CE --version-string.ProductName=\"AutoHARP 3\"",
"package-linux": "electron-packager . electron-tutorial-app --overwrite --asar=true --platform=linux --arch=x64 --icon=assets/icons/png/icon.png --prune=true --out=release-builds",
"postinstall": "install-app-deps"
},
"author": "Fr David Klecker",
"license": "ISC",
"dependencies": {
"bootstrap": "^4.5.3",
"electron": "^10.1.4",
"jquery": "^3.5.1",
"mysql": "^2.18.1",
"popper.js": "^1.16.1",
"sqlite3": "^5.0.0"
},
"devDependencies": {
"electron-builder": "^22.9.1",
"electron-rebuild": "^2.2.0"
}
}
try adding:
before:
Alternatively using an Electron version of 8 or older should also work. For more info check out: https://github.com/electron/electron/issues/18397
I stumbled upon this solution here: https://github.com/electron/electron/issues/24933