javascript - React App：Webpack 无法加载一些结构通用的依赖项

Question

这可能不是直接与面料相关的问题，但它只在包含面料后才出现在我身上。

我在“enzian-yellow”库中构建了一个基于 Fabric 的 BPM 引擎。React-App "CHRYSALIS" 安装了 enzian-yellow，但是当我尝试启动应用程序时，出现以下错误：

Module parse failed: Unexpected token (18:41)
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
| const REQUIRE_DIRECTORY_ERROR = 'loading a directory of commands is not supported yet for ESM'
|
> const mainFilename = fileURLToPath(import.meta.url).split('node_modules')[0]
| const __dirname = fileURLToPath(import.meta.url)
|
 @ ../enzian-yellow/node_modules/fabric-common/node_modules/nconf/node_modules/yargs/index.mjs 4:0-59 7:28-43
 @ ../enzian-yellow/node_modules/fabric-common/node_modules/nconf/lib/nconf/stores/argv.js
 @ ../enzian-yellow/node_modules/fabric-common/node_modules/nconf/lib/nconf/stores sync ^\.\/.*$
 @ ../enzian-yellow/node_modules/fabric-common/node_modules/nconf/lib/nconf.js
 @ ../enzian-yellow/node_modules/fabric-common/lib/Config.js
 @ ../enzian-yellow/node_modules/fabric-common/index.js
 @ ../enzian-yellow/node_modules/fabric-ca-client/lib/FabricCAServices.js
 @ ../enzian-yellow/node_modules/fabric-ca-client/index.js
 @ ../enzian-yellow/lib/hyperledger/hyperledger-accessor.js
 @ ../enzian-yellow/lib/hyperledger/index.js
 @ ../enzian-yellow/lib/index.js
 @ ./src/components/Deploy.js
 @ ./src/index.js

由于 enzian-yellow 的测试运行顺利，我认为这确实是加载程序问题，但我不知道要更改什么。

webpack.config.js

const path = require("path");
const webpack = require("webpack");


module.exports = {
  entry: {
    javascript: "./src/index.js"
  },
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx|mjs)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: {
          "presets": ["@babel/preset-env", "@babel/preset-react"],
          "plugins": ["@babel/plugin-transform-regenerator", "transform-class-properties"]
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      { test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              name: '[name].[ext]',
              publicPath: 'public/asset/'
            },
          },
        ],
      
      }

    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx", ".html", ".mjs"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js",
  },
  node: {
    net: 'empty',
    fs: 'empty',
    dgram: 'empty',
    tls: 'empty',
    dns: 'empty',
    http2: 'empty'
  },

  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true,
    historyApiFallback: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};

请注意，'node' 属性上的 'empty' 参数也是必需的，以便 @grpc 库能够解析这些常量。

依赖关系

"devDependencies": {
    "@babel/cli": "^7.1.0",
    "@babel/core": "^7.1.0",
    "@babel/preset-env": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "css-loader": "^1.0.0",
    "file-loader": "^6.2.0",
    "style-loader": "^0.23.0",
    "url-loader": "^4.1.1",
    "webpack": "^4.19.1",
    "webpack-cli": "^3.1.1",
    "webpack-dev-server": "^3.1.8"
  },
  "dependencies": {
    "@babel/plugin-transform-runtime": "^7.12.17",
    "@blueprintjs/core": "^3.39.0",
    "@blueprintjs/select": "^3.15.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "enzian-yellow": "file:../enzian-yellow",
    "fs-extra": "^4.0.3",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-hot-loader": "^4.3.11",
    "react-json-view": "^1.21.1",
    "react-router-dom": "^5.2.0",
    "web3": "1.3.3"
  }

我尝试过很多次更改版本，但似乎没有任何帮助。有什么建议么？

标签： javascriptnode.jsreactjswebpackhyperledger-fabric