javascriptnode.jselectrontiddlywikitiddlywiki5

electron browser javascript error

I am very new to node, javascript, and electron. I am just trying to write a simple app that opens a local HTML file in a browser window. The local file has some complex embedded javascript (tiddlywiki). Here is some sample code (I did not use local file in this one, but the result is the same):

const {app, BrowserWindow} = require('electron')
const path = require('path')
const url = require('url')

let win

function createWindow () {
// Create the browser window.
win = new BrowserWindow({width: 800, height: 600})


// and load the index.html of the app.
win.loadURL(url.format({
    pathname: 'tiddlywiki.com',
    protocol: 'http:',
    slashes: true,
    webPreferences: {
      nodeIntegration: false,
 }
 }))

When the electron app launches I get the following error in the browser dev tools.

Uncaught TypeError: Cannot read property 'length' of undefined
    at Object.$tw.boot.startup (tiddlywiki.com/:27506)
    at tiddlywiki.com/:27765
    at Object.$tw.boot.decryptEncryptedTiddlers (tiddlywiki.com/:27053)
    at Object.$tw.boot.boot (tiddlywiki.com/:27763)
    at _boot (tiddlywiki.com/:27772)
    at tiddlywiki.com/:27782

I assume this is because of some integration of the node.js object model? Sorry for the lack of understanding. Thanks in advance for the help.

Solution

  • You are on the right track. Another way you could do it is set nodeIntegration to false and preload a js file, which will get run in the BrowserWindow context and be able to access the window object once the process loaded event fires. The preload javascript file has full node integration just for itself.

    I used it to make a TiddlyFox handler so I could use the TiddlyFox saver that comes in TiddlyWiki in my Electron app. Here is the code for it. It is actually very simple.

    https://github.com/Arlen22/TiddlyWiki-Electron

    If you want to load a TiddlyWiki datafolder directly into Electron, you can try loading this HTML file. Node Integration needs to be set to true in new BrowserWindow(...)

    <!doctype html>
<html>
<head></head>
<body class="tc-body">
<script>
global.$tw = global.require("./boot/bootprefix.js").bootprefix();
global.$tw.boot.argv = ['./editions/server'];
global.$tw = require("./boot/boot.js").TiddlyWiki(global.$tw);
</script>
</body>
</html>