Buffer未定義エラーの解決方法

問題点

Webpack 5を使用したアプリケーションで Uncaught ReferenceError: Buffer is not defined エラーが発生する問題は、Node.jsのコアモジュールがブラウザ環境で利用できないことに起因します。Webpack 5では以前のバージョンとは異なり、Node.jsのpolyfillがデフォルトで含まれなくなったため、Bufferやstreamなどのモジュールを明示的に設定する必要があります。

典型的なエラーメッセージは以下のようになります：

rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
    at Object.4142 (rfc6979.js:3)
    at r (bootstrap:19)
    // ... スタックトレース続く

解決方法

方法1: Webpackの設定による解決（推奨）

webpack.config.js

const webpack = require('webpack');

module.exports = {
  // ... 既存の設定

  resolve: {
    extensions: ['.ts', '.js', '.jsx', '.tsx'],
    fallback: {
      "stream": require.resolve("stream-browserify"),
      "buffer": require.resolve("buffer")
    }
  },

  plugins: [
    new webpack.ProvidePlugin({
      Buffer: ['buffer', 'Buffer'],
      process: 'process/browser'
    })
  ]
};

依存関係のインストール

npm install --save buffer stream-browserify process

方法2: Create React Appでの設定

Create React Appを使用している場合は、react-app-rewiredで設定をカスタマイズできます：

依存関係のインストール

npm install --save buffer stream-browserify process
npm install --save-dev react-app-rewired

config-overrides.js

const webpack = require("webpack");

module.exports = function override(config, env) {
  config.resolve.fallback = {
    ...config.resolve.fallback,
    stream: require.resolve("stream-browserify"),
    buffer: require.resolve("buffer"),
  };
  
  config.plugins = [
    ...config.plugins,
    new webpack.ProvidePlugin({
      process: "process/browser",
      Buffer: ["buffer", "Buffer"],
    }),
  ];
  
  return config;
};

package.jsonスクリプトの更新

{
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test"
  }
}

方法3: グローバル変数として設定

シンプルな解決策として、アプリケーションのエントリーポイントでBufferをグローバルに設定する方法もあります：

App.jsx / App.tsx

import { Buffer } from 'buffer';

// グローバルスコープにBufferを設定
window.Buffer = Buffer;

パッケージインストール

npm install --save buffer

方法4: Viteを使用している場合

Viteプロジェクトの場合は、index.htmlに直接スクリプトを追加する方法が有効です：

<script type="module">
  import { Buffer } from 'buffer';
  window.Buffer = Buffer;
</script>

注意点

WARNING

Node.js環境で開発している場合は、ネイティブのBufferモジュールを使用してください：

import { Buffer } from 'node:buffer';

TIP

設定変更後は、必ずnode_modulesフォルダを削除してからnpm installを実行し、キャッシュをクリアしてください：

rm -rf node_modules
npm install

まとめ

Buffer is not definedエラーは、Webpack 5のポリフィル方針の変更によって発生します。プロジェクトの構成に応じて、適切な解決方法を選択してください：

• 通常のWebpackプロジェクト: 方法1の設定を追加
• Create React App: 方法2で設定をカスタマイズ
• シンプルな対応: 方法3でグローバルに設定
• Viteプロジェクト: 方法4でHTMLに直接追加

これらの解決策により、ブラウザ環境でBufferが正しく利用できるようになります。