electron-tabs で nodeIntegration を true にしたにも関わらず require is not defined エラーが出現する

前提・実現したいこと

Node.js + Electron + electron-tabs という構成でWebブラウザを開発しています。
electron-tabsを使用してタブ機能を実装することにしたのですが、いざやってみるとUncaught ReferenceError: require is not defined というエラーが。
nodeIntegration を true にすると治ると複数のサイトに記載があったためやってみたのですが、状況は変わりません。

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

Uncaught ReferenceError: require is not defined at main.html:10

該当のソースコード

/src/main.js

JavaScript
1const electron = require('electron');
2const app = electron.app;
3const BrowserWindow = electron.BrowserWindow;
4const path = require('path');
5
6let mainWindow = null;
7app.on('ready', () => {
8  mainWindow = new BrowserWindow({width: 700, height: 500});
9  webPreferences: {
10    preload: path.join(app.getAppPath(), 'preload.js')
11    nodeIntegration: true
12    webviewTag: true
13  }
14  mainWindow.loadURL('file://' + __dirname + '/main.html');
15  mainWindow.on('closed', function() {
16    mainWindow = null;
17  });
18});

/src/main.html

HTML
1<html>
2    <head><title>flussobrowser</title></head>
3    <div class="etabs-tabgroup">
4        <div class="etabs-tabs"></div>
5        <div class="etabs-buttons"></div>
6      </div>
7      <div class="etabs-views"></div>
8      <link rel="stylesheet" href="../node_modules/electron-tabs/electron-tabs.css">
9      <script>
10        const TabGroup = require("electron-tabs");
11        let tabGroup = new TabGroup();
12        let tab = tabGroup.addTab({
13         title: "Bing",
14         src: "https://www.bing.com/",
15         visible: true
16        });
17      </script>
18</html>

試したこと

・nodeIntegration の有効化
・preload の設定(Electron公式サイトより)

開発環境

Windows Insider Dev 10.0.22000.132(64ビット)
Node.js 14.17.0
Electron 13.2.0
electron-tabs 0.15.0

ちなみにelectron-tabsのサンプルプログラムでも同様のエラーが出現したため今バージョンのバグかな？とも考えております。
よろしくお願いします。

2021/8/26追記:どうやら2019年頃に同じ問題がteratailに投稿されていたようです。ただそちらも未だ回答はついていませんでした。

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

回答1件

自己解決

自己解決しました。(参考にしたサイト)
どうもpreload.jsの設定がうまく行っていなかったらしく、適切に設定してやったところ無事requireすることができました。

main.js

JavaScript
1const {app,BrowserWindow} = require('electron');
2const path = require('path');
3
4function createWindow () {
5
6    let win = new BrowserWindow({
7        width: 1000,
8        height: 800,
9        webPreferences: {
10            nodeIntegration: false,
11            enableRemoteModule: true,
12            contextIsolation: true,
13            preload: path.join(__dirname, 'preload.js')
14        },
15    });
16    win.loadFile("src/main.html");
17}
18app.whenReady().then(createWindow);

preload.js

JavaScript
1const TabGroup = require("electron-tabs");
2const Txxx = () => {
3let tabGroup = new TabGroup();
4let tab = tabGroup.addTab({
5title: "New Tab",
6src: "https://bing.com",
7visible: true
8});
9}

main.html

HTML
1<html>
2    <head><title>flussobrowser</title></head>
3    <div class="etabs-tabgroup">
4        <div class="etabs-tabs"></div>
5        <div class="etabs-buttons"></div>
6      </div>
7      <div class="etabs-views"></div>
8      <link rel="stylesheet" href="../node_modules/electron-tabs/electron-tabs.css">
9      <script>
10      Txxx();
11      </script>
12</html>

ただ、requireできたもののelectron-tabs側がエラーを吐いてるのと、constした関数にnot definedされてます。
そのあたりは試行錯誤しましょうかね。

投稿2021/08/28 16:20

mi0_harukaze767

総合スコア0

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.31%

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

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

質問する

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

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