Electron, npm, nodeを久々に更新した（nvm）

npm、nodeを久々に更新しようとしたところ、ESMモジュールシステムと古いCommonJSモジュールシステムの競合によるエラーが発生しました。
Node.jsとnpmのバージョンに互換性がない可能性があるため、Node.jsのバージョン管理ツールであるnvmをインストールしました。
nvmを使ってNode.jsの最新LTSバージョンをインストールし、npmを10.7.0にアップデートすることで問題を解決しました。

1. npmの更新通知

久々にElectronプログラムを作ろうと、npmコマンドを実行したら、更新のお知らせが表示されました。

npm install -g npm update

アクセス権限の問題でアップデートに失敗しました。

目次に戻る

2. ESMモジュールシステムと、古いCommonJSモジュールシステムとの競合

sudoで実行し直してみました。

 ~/Documents/local_code/calectron % sudo npm init -g npm updatePassword:
npx: 30個のパッケージを3.268秒でインストールしました。
internal/modules/cjs/loader.js:1149
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^
Error [ERR_REQUIRE_ESM]: Must use import to load ES Module:

このエラーは、Node.jsの最新バージョンで導入されたESMモジュールシステムと、古いCommonJSモジュールシステムとの競合が原因で発生しています。

create-npmパッケージがESMを使用しているため、Node.jsがそれを直接実行できないというエラーが発生しています。

ESMとCommonJS

ESM（ECMAScript Modules）とCommonJSは、JavaScriptでモジュールを扱うための2つの異なる方式です。

ESMは、JavaScriptの公式なモジュールシステムです。
CommonJSは、Node.js環境で主に使用されてきた古いモジュールシステムです。

Node.jsは、バージョンアップに伴いESMのサポートを強化していますが、CommonJSとの互換性を保つ必要があるため、混乱が生じることがあります。

この問題を解決するには、まず、npmのキャッシュをクリアして、最新バージョンに更新します：

sudo npm cache clean --force
sudo npm install -g npm@latest

目次に戻る

3. インストールされているNode.jsとnpmのバージョンに互換性がない

更新が完了したら、再度 npm init -g を実行してみます。

% npm                           
internal/modules/cjs/loader.js:960
  throw err;
  ^
Error: Cannot find module 'node:path'

しかし、またエラー。

このエラーは、npmがNode.jsの組み込みモジュール ‘path’ を見つけることができないことを示しています。
これは、インストールされているNode.jsとnpmのバージョンに互換性がない可能性があります。

目次に戻る

4. nvmをインストールした

まずは、nvmをインストールします。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash

nvmを使ってNode.jsの適切なバージョンをインストールし、npmを使ってプロジェクトに必要なパッケージを管理することで、Node.jsを使った開発をスムーズに行うことができます。

Node.js、nvm、npmの関係

Node.jsは、JavaScriptをサーバーサイドで実行するためのランタイム環境です。
nvmは、複数のNode.jsバージョンを管理するためのツールであり、プロジェクトごとに異なるバージョンを使用する際に便利です。
npmは、Node.jsのパッケージ管理ツールであり、プロジェクトに必要なライブラリやフレームワークを管理するために使用されます。

インストールが完了したら、いったんターミナルを閉じて新しいターミナルウィンドウを開きます。これにより、nvmの環境変数が正しく設定されます。

目次に戻る

5. Node.jsの最新のLTSバージョンをインストール

nvmを使用して、Node.jsの最新のLTSバージョンをインストールします：

nvm install --lts
nvm use --lts

nodeは、v20.13.1に更新できました。

目次に戻る

6. npmは10.7.0にアップデート

今度は、npmは10.7.0にアップデートされました。

※brewコマンドの更新も必要でした。

zshでエラーでbrewの更新が必要だった（compinit）

zshの自動補完機能に関するエラー「zsh compinit: insecure directories, run compaudit for list. 」が発生したため、解決方法を調べました。compauditコマンドでパーミッションを確認し、chmodコマンドで修正を試みましたが、新たなエラーが発生しました。Homebrew Caskの再インストールを行ったところ、無事にエラーが解決し、自動補完機能が正常に動作するようになりました。zshの自動補完機能に関するエラー久々...

目次に戻る

7. electronコマンドも更新しました

electron --version
npm uninstall -g electron
npm install -g electron@latest

ターミナルを起動し直したら、最新バージョンが反映されました¹。

目次に戻る

7-1. @electron/packagerの更新

ついでに electron-packagerも更新します。

sudo npm uninstall -g electron-packager
sudo npm install -g @electron/packager --unsafe-perm=true --allow-root

electron-packagerパッケージが非推奨（deprecated）になり、代わりに@electron/packagerパッケージに名称変更されていました。

npm warn deprecated electron-packager@17.1.2:
Please use @electron/packag] er moving forward.
There is no API change, just a package name change

こちらもどうぞ。

zshでエラーでbrewの更新が必要だった（compinit）

久しぶりにMacでElectronを使えるようにした【node.jsでアプリ自作】

Macで動く自作ツールをJavaScriptでプログラムするために、Electronを使っていました。久しぶりにプログラムを修正しようとしたら、electronコマンドが通りません。改めて環境を構築しました。ポイントelectronのインストールで「sudo npm install -g electron --unsafe-perm=true --allow-root」でオプションを付加しないとエラーになったElectronが見つからないElectronは、「HTML5やJa...

MacにNode.jsをインストールした

MacでローカルにJavaScriptを使うために、Node.jsをインストールしました。手順をメモしておきます。「Node.js」からMac用インストーラをダウンロードして、インストールします。LTS（長期間サポート版）をダウンロードしました。あとは、通常のインストール操作です。Node.js v12.16.3と、npm v6.14.4をインストールできました。続きはこちらからこちらもどうぞ

Javascriptでmac用のツールを作ってみる【Electron】

簡単なファイル整理用のMacツールを作ってみたので、メモをしておきます。ElectronとAtomとクロスプラットフォームElectronというアプリ開発環境があります。もともとAtomというエディタソフトを開発するときに生まれました。ちょうどGIMPを作るときに生まれたGTKみたいですね。Atomエディタは、WindowsだけでなくMac, Linuxそれぞれで動くエディタです。クロスプラットフォームなわけです。ElectronはAtomエディタを作るときに作ったフレームを...

（補足）

30.0.0 2024-Apr-16- Electronのリリース | Electron

目次に戻る

QRコードを読み込むと、関連記事を確認できます。