[解決済み] Uncaught ReferenceError: Buffer は定義されていません。

質問

アプリケーションにタイトルにあるエラーが表示され続けます。この問題は Webpack 5 polyfill に関連している可能性が非常に高く、いくつかの解決策を検討した結果、以下のようになりました。

1. フォールバックの設定＋npmでインストール

fallback: {
  "stream": require.resolve("stream-browserify"),
  "buffer": require.resolve("buffer/")
}

1. エイリアスの設定

alias: {
  "buffer": "buffer",
  "stream": "stream-browserify"
}

まだ、恐ろしいエラーが表示されています。

rfc6979.js:3 Uncaught ReferenceError: Buffer is not defined
    at Object.4142 (rfc6979.js:3)
    at r (bootstrap:19)
    at Object.5892 (js.js:4)
    at r (bootstrap:19)
    at Object.4090 (bip32.js:5)
    at r (bootstrap:19)
    at Object.7786 (index.js:3)
    at r (bootstrap:19)
    at Object.1649 (MnemonicKey.js:50)
    at r (bootstrap:19)

私たちのセットアップは vanilla NodeJS + TypeScript + Webpack で、マルチターゲット：ノード + ブラウザです。どのようなヘルプも素晴らしいだろう

どのように解決するのですか？

自分自身の質問に答えます。2つのことで解決しました。

1. webpack.config.jsにProviderPluginを含むpluginsセクションを追加する。

const webpack = require('webpack');

module.exports = {
    // ...

    plugins: [
        // Work around for Buffer is undefined:
        // https://github.com/webpack/changelog-v5/issues/10
        new webpack.ProvidePlugin({
            Buffer: ['buffer', 'Buffer'],
        }),
        new webpack.ProvidePlugin({
            process: 'process/browser',
        }),
    ],

1. また、webpack.config.jsにresolve.fallbackを追加してください。

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