モジュールパースエラーの解決: Babelのバージョン問題

問題の説明

Create React App環境でnpm update実行後、以下のWebpackビルドエラーが発生するケースがあります：

Compiled with problems:

ERROR in ./node_modules/pako/lib/zlib/trees.js 257:106

Module parse failed: Unexpected token (257:106)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|  *     not null.
|  */
> function gen_bitlen(s, desc) /*    deflate_state *s;*/ /*    tree_desc *desc;    /* the tree descriptor */*/{
|   var tree = desc.dyn_tree;
|   var max_code = desc.max_code;

このエラーは特定のファイル（例：pako/lib/zlib/trees.js）をBabelが正しく処理できないことを示しています。以下が観測される特徴です：

• npm update実行後に突然発生
• 同一コードでも環境によって再現性あり/なしが発生
• 依存パッケージのバージョンは同じでも環境で挙動が異なる
• 再インストール(rm -rf node_modules package-lock.json && npm install)で解決しない

エラーの根本原因

Babel 7.20.0 ～ 7.20.2 バージョンのリグレッションが主な原因です。2022年11月4日にリリースされたこれらのバージョンでは、オプショナルチェイニング(?.)やコメント付き関数宣言などの構文処理に問題がありました。

重要ポイント

エラーメッセージはpakoパッケージを指しますが、実際の問題はBabelトランスパイラにあります。pakoは単に問題が表面化しただけで根本原因ではありません。

解決方法

推奨ソリューション：Babelの最新安定版に更新

Babelチームはissue #15132でこの問題を修正しました。再現済みの解決手順：

# 問題のあるBabel関連パッケージを一括更新
npm update @babel/core @babel/generator @babel/compat-data @babel/helper-compilation-targets @babel/helper-create-class-features-plugin @babel/helper-module-transforms

# キャッシュクリアと再ビルド
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
npm start

緊急回避策：Babelバージョンの固定

すぐに更新できない場合、package.jsonに以下を追加して特定バージョンに固定します：

{
  "overrides": {
    "@babel/core": "7.19.6",
    "@babel/generator": "7.19.6",
    "@babel/compat-data": "7.19.4",
    "@babel/helper-compilation-targets": "7.19.3",
    "@babel/helper-create-class-features-plugin": "7.19.0",
    "@babel/helper-module-transforms": "7.19.6"
  }
}

npm

# overrides 適用後の再インストール
rm -rf node_modules package-lock.json
npm install

yarn

# resolutionsを使用する場合 (yarn)
{
  "resolutions": {
    "@babel/core": "7.19.6",
    "@babel/generator": "7.19.6",
    // ...他パッケージも同様
  }
}
# 適用コマンド
yarn install

他の環境での注意点

Next.js利用時

サーバーサイコンポーネントで"use server"ディレクティブの不足がエラーを引き起こすケース：

"use server"; // 追加が必要なケースあり

import { getRemoteConfig } from 'firebase-admin/remote-config';

export async function myAction() {
  // ...処理
}

カスタムWebpack設定時

transpileDependenciesを無効化すると改善する場合があります：

module.exports = {
  transpileDependencies: false // Vue CLI環境の例
};

予防策とベストプラクティス

• 依存関係の更新ポリシー: npm update実行時は非破壊的な更新(--depthオプション)を検討
• ロックファイルの管理: package-lock.json を更新前にバックアップ
• Babelプラグインの明示的指定: @babel/plugin-proposal-optional-chainingを直接追加

  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.21.0"
  }

トラブルシューティングフロー

問題が解決しない場合の確認手順：

1. Babel関連パッケージのバージョン一致確認: npm ls @babel/core
2. 依存ツリーの競合確認: npm explain @babel/helper-module-transforms
3. Webpackローダー設定の確認（特にnode_modules除外ルール）
4. pako依存元の確認: npm explain pako

最終手段

上記が全て失敗する場合、Create React Appのスクリプトをreact-app-rewiredで上書き：

npm install --save-dev react-app-rewired customize-cra

const { override, addBabelPlugin } = require('customize-cra');

module.exports = override(
  addBabelPlugin('@babel/plugin-proposal-optional-chaining')
);