node.js を 12.18 から 14.5 にバージョンアップして、javascript プロジェクトを実行しようとしたら、node modules の babel 関連パッケージと思われるエラーが出てビルドに失敗しました。

調べると、 Vue CLI やら React 関連の環境で同じようなエラーが起こってる方もいるみたいなので解決した方法とか、関連の情報を記録しておきます。

事象

node.js を2020年7月時点の最新版 v14.5 にアップデートして、React ベースの静的サイトジェネレータである Gatsby のプロジェクトを起動しようとしたところ、エラーが発生。

Error: Cannot find module '@babel/compat-data/corejs3-shipped-proposals'

うむむ、エラーメッセージからして、なにやら Babel 関連のモジュール取得ができずにビルド時点で失敗している模様。

環境

エラー発生したと時の環境はこんな感じ。

package.json 抜粋

問題が起こったパッケージバージョンを抜粋

 "dependencies": {
　　　：略
    "@babel/core": "^7.2.2",    "gatsby": "^2.20.29",
    "gatsby-image": "^2.2.44",
    　：略
 }

原因と解決への方針

Node のバージョン 13.13 以降の Conditional Exports^※ 機能を使った パッケージ読み込み時に Babel パッケージの読み込みに失敗しているみたい。

※(英語参考）Conditional Exports の仕様 … package.json の中の exports 欄にパッケージが提供するモジュールを CommonJS や ES Module 形式で書くと、node.js が読み取ってくれる。

Node.js 公式 の　Issues - Errors from conditional exports after upgraded to Node 13.13 #32852 に記載あり。

解決

babel パッケージですでに修正版を出してくれているので、バージョンアップして取得しなおします。ありがたやありがたや‥。

下にあるパッケージ使ってたら、対応後のバージョンへアップデートしましょー。

• @babel/preset-env は 7.9.0 以上に。
• @babel/core は 7.9.0 以上に。
• @babel/compat-data は 7.9.0 以上に。

package.json 抜粋

修正後のパッケージバージョンを抜粋

 "dependencies": {
　　　：略
    "@babel/core": "~7.9.0",    "@babel/compat-data": "~7.9.0",    "gatsby": "^2.20.29",
    "gatsby-image": "^2.2.44",
    　：略
 }

自分の環境では、 @babel/core と @babel/compat-data の二つをアップデート。

npm install で更新して、gatsby develop が無事に動作しました。

おしまい。

解決その２

node.js を バージョン 13.2 以前に戻したらとりあえず解決するかと思われます。

あんまりパッケージを変更したくないなどでしたら、とりあえずバージョンを戻してけば良さそうです。

参考

• (英語)Conditional Exports の仕様
• (英語)Node.js 公式 の　Issues - Errors from conditional exports after upgraded to Node 13.13 #32852
• (英語)travis-ci.com - babel - Babel の CI 失敗

変更履歴

• 2020/07/21 初版公開