当我尝试在我的项目中包含walletconnect模块时，我当前遇到了webpack问题。由于我以前没有使用过webpack，我无法自行解决此问题。由于我需要在今晚完成此项目，因此时间至关重要。如果您能帮助我解决此错误，我将非常感谢，运行"npm run dev"命令后，此错误显示在下面的跟踪中。

ERROR in ./frontend/src/components/App.js 14:11
Module parse failed: Unexpected token (14:11)
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
|   }
|   render() {
>     return <button>Click Me</button>;
|   }
| }
 @ ./frontend/src/index.js 1:0-34

webpack 5.12.3 compiled with 1 error in 155 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-webpack-project@1.0.0 dev: `webpack --mode development --entry ./frontend/src/index.js --output-path ./static/frontend/main.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the my-webpack-project@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\AHMED\AppData\Roaming\npm-cache\_logs\2021-01-11T18_43_05_567Z-debug.log

正如我告诉你的，我只是想添加walletconnect功能，为此我需要使用节点模块中的walletconnect模块。

• • 网络包配置js**

var webpack = require('webpack');
    module.exports = {
        module:{
            rules:[
                {
                    test:/\.js$/,
                    exclude:/node_modules/,
                include: [/node_modules\/@walletconnect/],
                
                // target: 'node'
                use:{
                    loader:"babel-loader"
                },
                
            }
        ],
        
    },
    resolve: {
        alias: {
            'crypto': false,
            'buffer': false,
        }
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify('development')
        })
    ],
    
}

• • 网络包. json**

{
  "name": "my-webpack-project",
  "version": "1.0.0",
  "description": "My webpack project",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --entry ./frontend/src/index.js --output-path ./static/frontend/main.js",
    "build": "webpack"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/AhmedYasin487/Dotescrow.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/AhmedYasin487/Dotescrow/issues"
  },
  "homepage": "https://github.com/AhmedYasin487/Dotescrow#readme",
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@webpack-cli/init": "^1.1.1",
    "babel-loader": "^8.2.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^5.0.1",
    "react-native": "^0.63.4",
    "react-native-walletconnect": "0.0.1-alpha.2",
    "style-loader": "^2.0.0",
    "terser-webpack-plugin": "^5.1.1",
    "ts-loader": "^8.0.14",
    "typescript": "^4.1.3",
    "webpack": "^5.12.3",
    "webpack-cli": "^4.3.1"
  },
  "dependencies": {
    "@walletconnect/client": "^1.3.3",
    "npm": "^6.14.11",
    "prop-types": "^15.7.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "rn-nodeify": "^10.2.0"
  }
}

• • 巴伯尔茨**

{
    "presets":["@babel/preset-env","@babel/preset-react","@walletconnect"],
    "plugins":["transform-class-properties"]
}

• • 应用程序. js**

import React , { Component } from 'react';
import ReactDOM from 'react-dom'
import WalletConnect from "@walletconnect/client";

class App extends Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    console.log('Click happened');
  }
  render() {
    return <button>Click Me</button>;
  }
}
ReactDOM.render(<App />,document.getElementById('app'));

如果需要更多的细节，然后在评论中告诉我，我会更新我的问题与该信息，谢谢!