質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

2969閲覧

Preload内のconsole.logは実行されるが、ファイルの読み込みではエラーが発生する

Praline

総合スコア46

Electron

Electronは、HTML5とNode.jsというWebの技術を用いてデスクトップアプリケーションを作成できるクロスプラットフォームな実行環境です。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/01/10 13:34

編集2022/02/02 16:07

前提・実現したいこと

Electronのバージョンアップに伴い、preloadファイルを使用したアプリへ修正を行っております。

発生している問題・エラーメッセージ

preloadファイルの読み込みでエラーが発生しており、プロセス間通信実装の障害になっております。

Unable to load preload script: '~/preload.js'
VM75 renderer_init.js:93 TypeError: Cannot read property 'createElement' of undefined

該当のソースコード

javascript

1//main.js - メインプロセス 2'use strict'; 3 4const {app,BrowserWindow,ipcMain} = require("electron"); 5const path = require("path"); 6 7let mainWindow; 8 9const createMainWindow = ()=>{ 10 mainWindow = new BrowserWindow({ 11 width: 800, 12 height: 600, 13 webPreferences: { 14 nodeIntegration: false, 15 contextIsolation: true, 16 preload: path.join(__dirname, 'preload.js') 17 } 18 }); 19 20 mainWindow.loadURL(path.join(__dirname, 'index.html')); 21 mainWindow.on('closed', function() { mainWindow = null; }); 22 23} 24 25app.on('window-all-closed', function() { 26 if (process.platform != 'darwin') {app.quit();} 27}); 28 29app.on('ready', createMainWindow); 30 31ipcMain.on("hoge", (fuga) => { console.log(fuga); });

javascript

1//preload.js 2const { contextBridge, ipcRenderer} = require("electron"); 3 4console.log('preload'); 5 6contextBridge.exposeInMainWorld( 7 "requires", { 8 "jquery": require('jquery') 9 }, 10 "api", { 11 send: (channel, data) => { 12 ipcRenderer.send(channel, data); 13 } 14 } 15);

javascript

1//index.js - レンダラプロセス 2"use strict"; 3 4window.api.send("hoge", "send"); 5

試したこと

実行時、preloadファイル内console.log('preload');が読み込めているので、ファイル自体は問題ないようなのですが、
レンダリングプロセス側のコンソールに該当のエラーメッセージが表示されています。

補足情報(FW/ツールのバージョンなど)

Electron v13.1.1
Node v14.15.5

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

preloadファイル内の構成が誤っている場合、本エラーが表示されることが判明しました。
構成を修正することで動作しましたので、一旦解決とさせていただきます。

投稿2022/02/02 16:54

Praline

総合スコア46

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問