nextronでcontextbridgeを使おうと思ったら詰まった

詰まったのでまとめておきます．

環境

• PC
  • macOS Monterey バージョン12.2.1
  • MackBook Air (M1, 2020)
• package.json

  "dependencies": {
    "electron-serve": "^1.1.0",
    "electron-store": "^8.0.1",
    "node-fetch": "2"
  },
  "devDependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/data-grid": "^4.0.0-alpha.37",
    "@types/node": "^16.11.7",
    "@types/react": "^18.0.8",
    "electron": "^18.2.0",
    "electron-builder": "^23.0.3",
    "next": "^12.1.6",
    "nextron": "^8.1.0",
    "react": "^18.1.0",
    "react-dom": "^18.1.0",
    "typescript": "^4.6.4"
  }

• バージョン

% yarn -v
1.22.17
% node -v
v16.0.0

解決法

※注意
electron, webpack, Next.js, どれもよくわかっていない者がコピペでなんとかした記録です．

ディレクトリ構成

最終的なファイル構成は次のようになります（抜粋）

.
├── app
│   ├── background.js
│   └── preload.js
├── main
│   ├── helpers
│   │   ├── constants.ts
│   │   ├── create-window.ts
│   │   └── index.ts
│   ├── background.ts
│   └── preload.ts
├── nextron.config.js
├── renderer
│   ├── @types
│   │   └── global.d.ts
│   └── next.config.js
└── resources

preload.ts, constants.ts, global.d.tsの作成

• main/preload.ts
• main/helper/constants.ts
• renderer/@types/global.d.ts
  この三つのファイルは，次の記事がとてもわかりやすいので，こちらをみてください．
  [Electron] contextBridgeでセキュアなIPC通信を実現する(TypeScript)

nextron.config.jsの作成

プロジェクトのルートにnextron.config.jsを作成します．
どうやら，この設定でbackground.tsとpreload.tsの場所をwebpackに教えてあげないとpreload.tsをコンパイルしてくれないっぽいです．

module.exports = {
    webpack: (defaultConfig, env) =>
      Object.assign(defaultConfig, {
        entry: {
          background: './main/background.ts',
          preload: './main/preload.ts',
        },
      }),
};

参考: https://github.com/saltyshiomix/nextron/issues/39

create-window.tsの編集

  const browserOptions: BrowserWindowConstructorOptions = {
    ...options,
    ...state,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: true,
      preload: path.join(__dirname,'../app/preload.js'), // app/preload.jsにコンパイル後のpreload.tsが出力される
      ...options.webPreferences,
      
    },
  };

browserOptionsにpreloadの行を追加します．ここで，preloadのパスに注意です．ここではコンパイル後の？preload.jsまでのパスを書くみたいです．
参考： https://github.com/saltyshiomix/nextron/issues/39

next.config.jsの編集

module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.target = 'electron-renderer';
      config.node = {
        __dirname: true,
      }
    }
    config.output.globalObject = 'this'
    return config;
  },
};

next.config.jsのwebpackの設定をいじることで次の二つの問題を解消します．

1. Next.jsで__dirnameが使えない問題解消

   Uncaught ReferenceError: __dirname is not defined
   at eval (client.js?1c37:7:161172)
   at eval (client.js?1c37:7:161301)
   at ../node_modules/next/dist/compiled/@next/react-dev-overlay/client.js (main.js?ts=1652202140562:27:1)
   
   

   上記のエラーメッセージが出るのを解消します．webpackの設定のカスタマイズをしているようです．ここに詳しい説明が載っていました．

     config.node = {
       __dirname: true,
     }
   

2. Uncaught ReferenceError: global is not definedの解消

   config.output.globalObject = 'this'
   

   こちらの設定をいじっているようです．
   https://webpack.js.org/configuration/output/#outputglobalobject

参考：　
https://github.com/saltyshiomix/nextron/issues/198#issuecomment-901972179
https://github.com/saltyshiomix/nextron/issues/82#issuecomment-730482377

あとがき

おそらく，これで私が遭遇したエラーの解消法はすべて…だと思いますが，色々いじっていたのでこれ以外にもあるかもしれません．
HTTPリクエストを叩くときに，CORSを回避するためにメインプロセスからやろうと思ったら思ったよりハマってしまいました．．．
正直，ググってコピペして解決しただけなので，webpack周り，electron周りはあまりよくわかっていないのですが，お役に立てれば幸いです．