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

詰まったのでまとめておきます．
# 環境
- PC
	- macOS Monterey バージョン12.2.1
	- MackBook Air (M1, 2020)
- package.json
```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"
  }

```
- バージョン
```bash
% 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)](
https://zenn.dev/rakim_stayfresh/articles/2928ac74a153a5)

## nextron.config.jsの作成
プロジェクトのルートに`nextron.config.js`を作成します．
どうやら，この設定でbackground.tsとpreload.tsの場所をwebpackに教えてあげないとpreload.tsをコンパイルしてくれないっぽいです．
```js
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の編集
```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の編集
```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の設定のカスタマイズ](https://nextjs-ja-translation-docs.vercel.app/docs/api-reference/next.config.js/custom-webpack-config)をしているようです．[ここ](https://webpack.js.org/configuration/node/)に詳しい説明が載っていました．
	```
	  config.node = {
        __dirname: true,
      }
	```
1. Uncaught ReferenceError: global is not definedの解消
	```
	config.output.globalObject = 'this'
	```
	[こちら](https://webpack.js.org/configuration/output/#outputglobalobject)の設定をいじっているようです．
	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周りはあまりよくわかっていないのですが，お役に立てれば幸いです．