Блог

Я создал приложение для минимального воспроизведения, которое демонстрирует мою проблему на основе шаблона «typescript webpack» для electron-forge. Я внес несколько изменений, чтобы продемонстрировать мою проблему, и вы можете найти все приложение здесь. README содержит все необходимые инструкции по воспроизведению (очень простые).

В основном, что я сделал, это создал src/other.html файл, и моя цель — загрузить содержимое этого файла и заменить содержимое #main-content div (расположенное в src/index.html ) новым содержимым. Код для этого находится в, src/renderer.ts но вот код, о котором идет речь:

 import fs from "fs";
import path from "path";

const contentElement = document.getElementById("main-content");
const linkElement = document.getElementById("switch");

if (!contentElement) throw "Unable to find main content div.";
if (!linkElement) throw "Unable to find link element.";

linkElement?.addEventListener("click", (event) => {
  event.preventDefault();

  const href = linkElement.getAttribute("href");

  if (href) {
    const fullPath = path.join(__dirname, href);

    console.log(`Full path: ${fullPath}`);

    fs.readFile(fullPath, (err, data) => {
      if (err) throw err;

      // show the selected page
      contentElement.innerHTML = "";
      contentElement.insertAdjacentHTML("beforeend", data.toString());
    });
  }
});
 

Он добавляет обработчик щелчка, который захватывает значение атрибута href и пытается создать путь к новому файлу __dirname , учитывая, что два HTML-файла находятся в одном каталоге.

Вместо того, чтобы этот код работал должным образом, я сталкиваюсь со следующей ошибкой в консоли разработчика:

 Uncaught Error: Invalid package /Users/taylorthurlow/Temp/electron-problem-min-repro/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar
    at createError (electron/js2c/asar_bundle.js:5)
    at Object.e.readFile (electron/js2c/asar_bundle.js:5)
    at HTMLAnchorElement.<anonymous> (renderer.ts:50)
createError @ electron/js2c/asar_bundle.js:5
e.readFile @ electron/js2c/asar_bundle.js:5
(anonymous) @ renderer.ts:50
 

Вызов журнала консоли печатает:

 Full path: /Users/taylorthurlow/Temp/electron-problem-min-repro/node_modules/electron/dist/Electron.app/Contents/Resources/electron.asar/renderer/other.html
 

Я взглянул на Resources каталог, который electron.asar , как ожидается, будет внутри, но я вижу только default_app.asar и некоторые другие несвязанные вещи. Я предполагаю, что именно поэтому я получаю ошибку. Я недостаточно разбираюсь в javascript / typescript или любой экосистеме, окружающей его, чтобы действительно понять, что здесь происходит.

Некоторые номера версий:

• electron-forge v6 beta 54
• electron 11.0.3
• node 12.20.0