実現したいこと
electronで作成しているメモアプリにてEditor.jsのリッチテキストエディタを使用したい。
オフライン環境のデスクトップアプリなのでCDNの使用は避けたい。
前提
electronでオフラインで動かすメモアプリを作っています。
npmでインストールしたリッチテキストエディタ(https://editorjs.io/)をrequireする際にエラーが起きてしまう。
セキュリティの問題上 、main.jsのontextIsolationはtrue,のまま実行したい。
発生している問題・エラーメッセージ
VM4 sandbox_bundle:2 Unable to load preload script: /Users/node-js/memo-app/preload.js VM4 sandbox_bundle:2 Error: module not found: @editorjs/editorjs at preloadRequire (VM4 sandbox_bundle:2:82057) at <anonymous>:4:18 at runPreloadScript (VM4 sandbox_bundle:2:82809) at VM4 sandbox_bundle:2:83068 at VM4 sandbox_bundle:2:83223 at _electron_webpack_init (VM4 sandbox_bundle:2:83227) at VM4 sandbox_bundle:2:83350 index.html:12 Uncaught TypeError: Cannot read properties of undefined (reading 'EditorJS') at index.html:12:37
該当のソースコード
index.html
1<!DOCTYPE html> 2<html> 3 <head> 4 <meta charset="UTF-8" /> 5 <title>Memo App</title> 6 </head> 7 <body> 8 <!-- エディターを表示するためのdiv要素 --> 9 <div id="editor"></div> 10 <script> 11 // Editor.jsを初期化する 12 const editor = new window.ipc.EditorJS({ 13 holder: 'editor', // エディターを表示する要素のid 14 }); 15 </script> 16 </body> 17</html>
preload.js
1// Electronから必要なモジュールや関数をインポート 2const { contextBridge, ipcRenderer, } = require('electron'); 3const EditorJS = require('@editorjs/editorjs'); 4 5// メインプロセスとレンダラープロセスの間で通信するために、IPCハンドラーを公開する 6contextBridge.exposeInMainWorld('ipc', { 7 // EditorJS を公開 8 get EditorJS() { 9 return EditorJS; 10 }, 11//以下省略 12}); 13
試したこと
直接htmlでrequireするのは勿論失敗でした。
main.jsでeditorJsに対してrequireを使用する場合のやり方がわからず、苦戦している状態です。
補足情報(FW/ツールのバージョンなど)
下記は使用しているバージョンです。
"electron": "^24.1.2"
"@editorjs/editorjs": "^2.27.0",

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。