javascript - 带有shebang的文件的next.js webpack失败：模块解析失败：意外字符'#'

Question

由于在处理以 shebang 字符开头的文件时出现 webpack 错误，我无法使用 next.js 创建网页。我正在尝试让网页与使用 ganache-cli 设置的本地以太坊网络进行交互。这是我得到的错误：

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 文件并加载一个插件，该插件应该能够处理这些以 shebang ( 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 非常陌生。有没有简单的方法来处理这个错误？请通俗地解释（：

谢谢，

乌里

标签： javascriptwebpacknext.jsethereumganache