ソースコードとエラーコード

レンダラープロセス

エラーになるところは下記のソースコードの
const test = require("remote").require("./index");
の部分です。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
      <meta http-equiv="Content-Security-Policy"
          content="script-src 'unsafe-inline';default-src 'self'; style-src 'self' 'unsafe-inline';" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/style.css">
 <script type="text/javascript">
     const test = require("remote").require("./index");
     test.getdw();
 </script>
    <title>Document</title>
</head>

<body>
    <section>
        <h4>
            <%= name %>
        </h4>
        <span id="day"></span>
    </section>
</body>
 
</html>

メインプロセス

'use strict';

//Set Usage
const electron = require('electron');
const exec = require('child_process').exec;
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
const Menu = electron.Menu;
const dialog = electron.dialog;
const ejse = require('ejs-electron');
//const ipcMain = electron.ipcMain;
   function showAboutDialog() {
    dialog.showMessageBox({
        type: 'info',
        buttons: ['OK'],
        message: 'About This App',
        detail: ''
    });
    }

function showSettingsWindow(){
       var wn = new window_s('Imput');
}

function exec_out(cmd){
        exec(cmd, (error, stdout, stderr) => {
            console.log(stdout);
        });
}

class window{
    constructor(wname,type) {
       this.width=1400;
       this.height=700;
        let menuTemplate = [{
        label: 'アプリケーション',
        submenu: [
            { label: 'About', accelerator: 'CmdOrCtrl+Shift+A', click: function() { showAboutDialog(); } },
            { type: 'separator' },
            { label: 'Settings', accelerator: 'CmdOrCtrl+,', click: function() { showSettingsWindow(); }  },
            { type: 'separator' },
            { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() { app.quit(); }  }
        ]
        },{
        label: 'サーバ接続',
        submenu: [
            { label: 'About', accelerator: 'CmdOrCtrl+Shift+A', click: function() { showAboutDialog(); } },
            { type: 'separator' },
            { label: 'Settings', accelerator: 'CmdOrCtrl+S', click: function() { showSettingsWindow(); }  },
            { type: 'separator' },
            { label: 'Quit', accelerator: 'CmdOrCtrl+Q', click: function() { app.quit(); }  }
        ]
        }];
        let menu = Menu.buildFromTemplate(menuTemplate);

        Menu.setApplicationMenu(menu);
        this.window=[];
        this.window[wname] = new BrowserWindow({
                    width: this.width,
                    height: this.height,
                    webPreferences: {
                        nodeIntegration: true
                    },
                 'node-integration': false,
                });
        // this.window[wname] = new BrowserWindow({width:1000,height:700});
        this.window[wname].webContents.openDevTools();
        this.window[wname].loadURL(`file://${__dirname}/${wname}.${type}`);
        this.close(wname,function(){});
    }
      /**
       * @param {String} wname :Window name and Window file name
       * @param {func} func : Function
       * 
       */
      close(wname, func) {
          if (func == NaN) {

          } else {
              this.window[wname].on('closed', function () {
                  func();
              });
          }
      }
}

class window_s{
    constructor(wns,type){
            this.width = 1000;
            this.height = 700;
            var mw = new window(wns,type);
            mw.window[wns].webContents.on('did-finish-load', () => {
               mw.window[wns].webContents.send('getmsg', "Hello!!");
            });
    }
}

class window_ejs{
    constructor(wname){
             this.width = 1000;      
             this.height = 700;
             this.wname=wname;
             let menuTemplate = [{
                 label: 'アプリケーション',
                 submenu: [{
                         label: 'About',
                         accelerator: 'CmdOrCtrl+Shift+A',
                         click: function () {
                             showAboutDialog();
                         }
                     },
                     {
                         type: 'separator'
                     },
                     {
                         label: 'Settings',
                         accelerator: 'CmdOrCtrl+,',
                         click: function () {
                             showSettingsWindow();
                         }
                     },
                     {
                         type: 'separator'
                     },
                     {
                         label: 'Quit',
                         accelerator: 'CmdOrCtrl+Q',
                         click: function () {
                             app.quit();
                         }
                     }
                 ]
             }, {
                 label: 'サーバ接続',
                 submenu: [{
                         label: 'About',
                         accelerator: 'CmdOrCtrl+Shift+A',
                         click: function () {
                             showAboutDialog();
                         }
                     },
                     {
                         type: 'separator'
                     },
                     {
                         label: 'Settings',
                         accelerator: 'CmdOrCtrl+S',
                         click: function () {
                             showSettingsWindow();
                         }
                     },
                     {
                         type: 'separator'
                     },
                     {
                         label: 'Quit',
                         accelerator: 'CmdOrCtrl+Q',
                         click: function () {
                             app.quit();
                         }
                     }
                 ]
             }];
             let menu = Menu.buildFromTemplate(menuTemplate);

             Menu.setApplicationMenu(menu);
             this.window = [];
            
             // this.window[wname] = new BrowserWindow({width:1000,height:700});
            
             
             //this.window[wname].webContents.openDevTools();
         
    }

    Drow(type){

        ejse.data("name", "test");

         this.window[this.wname] = new BrowserWindow({
             width: this.width,
             height: this.height,
             'node-integration': true,
          webPreferences: {
              nodeIntegration: false
          }
            });

        this.window[this.wname].loadURL(`file://${__dirname}/${this.wname}.ejs`);
        this.close(this.wname, function () {

        });
           this.window[this.wname].webContents.openDevTools();
    }
     
      /**
       * @param {String} wname :Window name and Window file name
       * @param {func} func : Function
       * 
       */
      close(wname, func) {
          if (func == NaN) {

          } else {
              this.window[wname].on('closed', function () {
                  func();
              });
          }
      }
}

exports.getdw = function(){
    console.log("test");
}

app.on('ready',function(){

   var wns = new window_ejs('Menu');

   wns.width=500;
   wns.height=500;
   wns.Drow("ejs");
});

状態

electronを実行したところ、レンダラープロセスのコンソールでエラーコードが表示されている状態です。
エラーメッセージ

Uncaught ReferenceError: require is not defined
    at Menu.ejs:12

情報が少ないですが、どなたか情報をいただけますと助かります。

行動規範の内容に同意します

回答1件

ベストアンサー

長すぎてコードはほとんど見ていませんが。

https://teratail.com/questions/172094

過去に似た質問がありますが、これで解決しませんか？

投稿2019/11/18 13:37

2KOH

総合スコア999

y-ymo10

2019/11/19 03:19

回答ありがとうございます。 nodeIntegrationの指定はしているのですが、どうしてもレンダラープロセスでrequireが使用できない状態です。申し訳ありませんがよろしくお願いします。

2KOH

2019/11/19 07:37

nodeIntegration は二箇所書かれており、一方は true、もう一方は false となっていますが、これは意図したものでしょうか？

y-ymo10

2019/11/20 09:01

windowクラス内のコンストラクタ内とwindow_ejsクラスのDrowメゾット内に指定はして現在は、window_ejsクラスのみを使用しています。ご指摘いただいた点で先ほど、２箇所をfalseにして実行しましたが同じエラーが発生してしまいました。無知なもので、質問に対する回答になっているか分かりませんが、よろしくお願いいたします。

2KOH

2019/11/20 15:58

2箇所とも true にするのは試しましたか？

y-ymo10

2019/11/21 03:36

２箇所をtrueにすると、下記のエラーが発生してしまいます。 ``` Uncaught /Users/***/Desktop/Project/electronwindowbase/node_modules/remote/libs/remote.coffee:8 module.exports = (opts = {}) -> ^ SyntaxError: Unexpected token > at new Script (vm.js:83:7) at createScript (vm.js:265:10) at Object.runInThisContext (vm.js:313:10) at Module._compile (internal/modules/cjs/loader.js:712:26) at Object.Module._extensions..js (internal/modules/cjs/loader.js:798:10) at Module.load (internal/modules/cjs/loader.js:645:32) at Function.Module._load (internal/modules/cjs/loader.js:560:12) at Module.require (internal/modules/cjs/loader.js:685:19) at require (internal/modules/cjs/helpers.js:16:16) at file:///Users/***/Desktop/Project/electronwindowbase/Menu.ejs:12:19 ```

2KOH

2019/11/21 10:28

Uncaught ReferenceError: require is not defined というエラーが解決したのであれば、一歩前進です。また、このエラーを解決してほしいというこの質問の目的はすでに達成されていると思います。きりがないので、一旦この質問は解決済みにして閉じてください。その上で、上記コメントのエラーの解決方法がどうしてもわからないのであれば、別の質問を立てて聞いてください。

y-ymo10

2019/11/21 14:09

2KOHさんありがとうございます。大変勉強になりました。改めて確認させていただきます。

行動規範の内容に同意します