0
Help us understand the problem. What are the problem?

posted at

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の作成

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周りはあまりよくわかっていないのですが,お役に立てれば幸いです.

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?