Search code examples
javascriptelectronparceljs

HTML loads, but scripts don't run

I've this script compiled through Parcel:

/src/Main.ts

import { app, BrowserWindow, Menu } from 'electron';

alert('Hi');
document.title = 'Xxx';
console.log('Hello');

Entry HTML for Parcel:

/src/Main.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Empty Electron App</title>
  </head>
  <body>
    <script>alert('Aaaaah!');
    </script>
    <script src="./Main.ts"></script>
  </body>
</html>

I'm bundling with Parcel using:

/build.js

// ...
const entry = './src/Main.html';
const options = {
    outDir: './build',
    publicUrl: './',
    sourceMaps: false,
    autoInstall: false,
    hmr: false,
    target: 'electron',
};

// ...
(async () => {
    // ...
    bundler.bundle();
})();

It seems like Electron is not running the scripts included in the entry point HTML (does not alert nor mutate the page title nor log to the console). Like I said, the console.log() does not produce anything to the host environment terminal running Electron. I've tested this further by inserting text nodes in the HTML, like this:

<!DOCTYPE HTML>
<html>
<head>
    <!-- ... -->
</head>
<body>
    Foo foo foo foo foo
</body>
</html>

The app renders Foo foo foo foo foo successfuly; the scripts don't do anything. Am I missing some configuration?

Here are more sources:

Here's what the output HTML looks like:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
    <title>Empty Electron App</title>
  </head>
  <body>
    <script>alert('Aaaaah!');</script>
    <script src="Main.d562fc5b.js"></script>
  </body>
</html>

File structure (/build):

enter image description here

Solution

  • In your build.js file replace the target option with web instead of electron.

    UPDATE: I actually found a better solution to your problem as you may need to use the right target at some time in your application. See below:

    The issue is that nodeIntegration isn't enabled on your BrowserWindow although you specified it in the options. This is because contextIsolation is on by default and those two options cannot work together. Adding contextIsolation: false inside webPreferences when building your window should also fix your issue while keeping the parcel target to electron.