Unable to load preload script

I'm seeing this in the DevTools console when I run the latest builds:

Unable to load preload script: /Users/simon/Downloads/Datasette-macOS/Datasette.app/Contents/Resources/app.asar/preload.js

As a result any feature that needs the preload script - e.g. features that call datasetteApp like the purple button here - fail:

https://stackoverflow.com/a/60845153 suggests that preload.js now needs to be included in extraResources or one of the other similar keys.

https://www.electronjs.org/docs/latest/tutorial/tutorial-preload

Relevant code:

datasette-app/main.js

Lines 469 to 477 in 6de9080

    
           function windowOpts(extraOpts) { 
        
             extraOpts = extraOpts || {}; 
        
             let opts = { 
        
               width: 800, 
        
               height: 600, 
        
               webPreferences: { 
        
                 preload: path.join(__dirname, extraOpts.preload || "preload.js"), 
        
               }, 
        
             };

https://www.electron.build/configuration/contents#files - maybe adding it to "files" could help, e.g. this app does that: https://github.com/tencentyun/TRTCSDK/blob/7b1578a21cad7d16fcb57664e1ee7a34b0fa1b1d/Electron/TRTC-API-Example/package.json#L47

I grabbed the app.asar file from the latest build and extracted it:

npx asar extract app.asar .

Got this:

drwxr-xr-x   3 simon  wheel    96B Feb 16 20:14 .github
-rw-r--r--   1 simon  wheel   3.5K Feb 16 20:14 README.md
-rw-r--r--@  1 simon  wheel   3.1M Feb 16 20:13 app.asar
-rw-r--r--   1 simon  wheel   397B Feb 16 20:14 did-fail-load.html
-rwxr-xr-x   1 simon  wheel   521B Feb 16 20:14 download-python.sh
-rw-r--r--   1 simon  wheel   4.3K Feb 16 20:14 loading.html
-rw-r--r--   1 simon  wheel    32K Feb 16 20:14 main.js
drwxr-xr-x  13 simon  wheel   416B Feb 16 20:14 node_modules
-rw-r--r--   1 simon  wheel   432B Feb 16 20:14 package.json
-rw-r--r--   1 simon  wheel   3.9K Feb 16 20:14 progress.html
-rw-r--r--   1 simon  wheel    10B Feb 16 20:14 requirements.txt
drwxr-xr-x   3 simon  wheel    96B Feb 16 20:14 scripts
-rw-r--r--   1 simon  wheel   169B Feb 16 20:14 server-log-preload.js
-rw-r--r--   1 simon  wheel   649B Feb 16 20:14 server-log.html
drwxr-xr-x   3 simon  wheel    96B Feb 16 20:14 test
drwxr-xr-x   3 simon  wheel    96B Feb 16 20:14 test-videos

Not sure why all of that stuff is in there but preload.js is not.

Also don't want the test-videos folder in there! That's the video generated during CI runs.

It would be useful if I could run a build on my laptop instead of just in CI.

Adding this to "build" in package.json almost but didn't quite fix that:

    "mac": {
      "target": {
        "target": "default",
        "arch": [
          "x64"
        ]
      },

New theory:

I think it's down to this line in preload.js:

datasette-app/preload.js

Line 2 in c644359

const path = require("path");

https://www.reddit.com/r/electronjs/comments/wydus6/unable_to_require_path_and_fs_modules_in_preload/ has a tip:

Electron v20 changes the default setting for sandboxing renderers with preload scripts to true. This means you need to set the sandbox: false option on your BrowserWindow to access Node APIs in your preload.

https://www.electronjs.org/blog/electron-20-0

The built package still doesn't have preload.js in its app.asar file for some reason.

Possibly relevant: https://stackoverflow.com/questions/70175316/electron-unable-to-load-preload-script-resources-app-asar-src-preload-js

npx asar extract app.asar app

That confirms that the preload.js script is NOT in that archive - which is weird, because other files like server-log-preload.js ARE included in that archive.

After much mucking around locally it looks like adding preload.js to that list did at least convince it to be included in the app.asar file.

That fixed it! The build generated by https://github.com/simonw/datasette-app/actions/runs/4277650268 worked correctly.

I grabbed a copy of that build and saved it here - once a few more people have tested I'll ship it as a new release. https://static.simonwillison.net/static/2023/feb-26-datasette-desktop/Datasette.app.zip

Asked for help testing this in https://discord.com/channels/823971286308356157/823971286941302908/1079616010069495829

OK, I'm going to ship it.

	function windowOpts(extraOpts) {
	extraOpts = extraOpts \|\| {};
	let opts = {
	width: 800,
	height: 600,
	webPreferences: {
	preload: path.join(__dirname, extraOpts.preload \|\| "preload.js"),
	},
	};