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

问题描述

我在使用 next.js 创建网页时遇到问题，因为在处理以 shebang 字符开头的文件时似乎出现了 webpack 错误。我试图让网页与使用 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 文件并加载一个插件，该插件应该能够根据 next.config.js 文档（https://www.npmjs.com/package/webpack-shebang-plugin）处理这些以 shebang (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 非常陌生。有没有简单的方法来处理这个错误？请用通俗的语言解释 (:

谢谢，

Uri

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）