Electron + Next.jsの開発で、yarn devを実行した際にエラーが発生する際の対策（UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null 編） 💪

ことの発端

普段、Electronアプリを制作する際は、 Next.jsのElectron + TypeScriptのexample を使っています。

yarn create next-app --example with-electron-typescript app-name

で、Electron + Next.jsの雛形が作成できるので非常に便利です。

しかし、最近昔作ったプロジェクトの開発サーバを起動しようとして、

yarn dev

を実行したところ、

UnhandledPromiseRejectionWarning: TypeError: Class extends value undefined is not a constructor or null

というエラーが発生し、起動できなくなっていました。

原因

何もしていないのに起動できなくなったということは、nodeのバージョンやらパッケージのバージョンやらが怪しいです。
プロジェクトのpackage.jsonを確認すると、

"dependencies": {
  "electron-is-dev": "^1.1.0",
  "electron-next": "^3.1.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"devDependencies": {
  "@types/node": "^14.14.6",
  "@types/react": "^16.9.9",
  "@types/react-dom": "^16.9.9",
  "electron": "^13",
  "electron-builder": "^23.0.3",
  "next": "latest",
  "rimraf": "^3.0.0",
  "typescript": "^4.0.5"
},

という感じで、nextのバージョンはlatestになっているものの、electronのバージョンが13.xで固定されていました。
これは非常に怪しいです。

解決方法その1

"dependencies": {
  "electron-is-dev": "^1.1.0",
  "electron-next": "^3.1.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"devDependencies": {
  "@types/node": "^14.14.6",
  "@types/react": "^16.9.9",
  "@types/react-dom": "^16.9.9",
  "electron": "latest",
  "electron-builder": "^23.0.3",
  "next": "latest",
  "rimraf": "^3.0.0",
  "typescript": "^4.0.5"
},

electronもlatestに書き換えたところ、無事に、

yarn dev

で、開発サーバが起動するようになりました。
しかし、他のパッケージはバージョンが固定されているので、またいつか動かなくなるのではないかという不安が残ります。

解決方法その2

"dependencies": {
  "electron-is-dev": "^1.1.0",
  "electron-next": "^3.1.5",
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
},
"devDependencies": {
  "@types/node": "^14.14.6",
  "@types/react": "^16.9.9",
  "@types/react-dom": "^16.9.9",
  "electron": "^26.0.0",
  "electron-builder": "^23.0.3",
  "next": "^13.4.18",
  "rimraf": "^3.0.0",
  "typescript": "^4.0.5"
},