javascript - shebang を含むファイルでの next.js webpack の失敗: モジュールの解析に失敗しました: 予期しない文字 '#' です

Question

シバン文字で始まるファイルを処理する際の webpack エラーのように見えるため、next.js を使用して Web ページを作成する際に問題が発生しています。ganache-cli でセットアップされたローカル イーサリアム ネットワークと対話する Web ページを取得しようとしています。これが私が得ているエラーです：

error - ./node_modules/ganache-cli/build/ganache-core.node.cli.js
Module parse failed: Unexpected character '#' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> #!/usr/bin/env node

index.js ファイルは次のとおりです。

import React, { Component } from 'react';
import vault from '../ethereum/vault';

class VaultIndex extends Component {

  render() {
    return <div>test</div>
  }
}

export default VaultIndex;

インポートされたvault.jsファイルは、このrequireステートメントで始まります。エラーに基づいて推測すると、事態は危険にさらされ始めます。

const ganache = require('ganache-cli');

next.config.js ファイルを作成し、次のように、シバン ( https://www.npmjs.com/package/webpack-shebang-plugin )で始まるこれらのファイルを処理できるプラグインをロードしようとしました.config.js ドキュメント ( https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config )。next.config.js ファイルは次のとおりです。

const ShebangPlugin = require('webpack-shebang-plugin');

module.exports = {
  webpack: (config) => {

    config.plugins.push(new ShebangPlugin())

    return config
  },
}

これを行うと、次のエラーが発生します。

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 4. Reason: custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
ReferenceError: Cannot access 'watcher' before initialization
    at D:\My stuff\Vault\node_modules\next\dist\server\hot-reloader.js:31:40
    at Watching.handler (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:83932:17)
    at Watching._done (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:94252:9)
    at onCompiled (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:94201:26)
    at D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:74777:21
    at AsyncParallelHook.eval [as callAsync] (eval at create (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:128919:10), <anonymous>:19:1)
    at AsyncParallelHook.lazyCompileHook (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:128856:20)
    at D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:74776:20
    at AsyncSeriesHook.eval [as callAsync] (eval at create (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:128919:10), <anonymous>:6:1)
    at AsyncSeriesHook.lazyCompileHook (D:\My stuff\Vault\node_modules\next\dist\compiled\webpack\bundle4.js:128856:20)

どうすればいいのかわからない。私は next.js や javascript を使用することに非常に慣れていません。このエラーに対処する簡単な方法はありますか? 平易な言葉で説明してください(:

ありがとう、

ウリ