electron browser javascript error

Question

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.

What is failing is the tiddlywiki code on the website: `(tiddlywiki.com/:27506)` After looking at the lines referenced in the stack trace, it looks like tiddlywiki fails at identifying the browser it is launched in and thus assumes it was launched from the command line. — ccprog, Jun 04 '17 at 13:56

score 2 · Answer 1 · answered Jun 04 '17 at 13:56

2

You put the webPreferences into the wrong place.

You have to put it in the initialization for the BrowserWindow and not in url.format:

win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
        nodeIntegration: false
    }
})

answered Jun 04 '17 at 13:56

RoyalBingBong

1,106
7
15

This actually works perfectly for what I asked. I found another way as well using the webView tag for a local HTML file. That may actually meet my needs better because it allows me to inject some js as a preload to the page-- allowing me to retain some tiddlywiki control (I think). – BrandonKurtz Jun 04 '17 at 15:59

score 0 · Answer 2 · answered Jun 04 '17 at 16:12

The way I ended up solving this was to use the following code in main.js:

 win.loadURL(url.format({
    pathname: path.join(__dirname, 'index2.html'),
    protocol: 'file:',
    slashes: true
}))

then index2 contains the following:

<html>
  <body>
    <webview id="webView" src="http://tiddlywiki.com" style="display:inline-flex; width:100%; height:100%" </webview>
  </body>    
</html>

Also tested with a local file:empty.html from tiddlywiki.com and that worked OK. I think this gives me the ability to preLoad a .js file to control some of the tiddlywiki events. Will have to learn more to test that out.

score 0 · Accepted Answer · answered Jun 12 '17 at 23:09

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>

This is good information @ArlenBeiler. I am working on an Electron version of TiddlyDesktop as a personal project to learn Javascript, node, and electron. I was actually able to get the save function working through my preload.js by adding in a save function that can utilize 'fs'. -- $tw.saverHandler.savers.push(new MyTempSaver($tw.saverHandler.wiki)); — BrandonKurtz, Jun 13 '17 at 13:45

electron browser javascript error

3 Answers3