Web3-react 錯誤模塊解析失敗：意外令牌您可能需要一個適當的加載程序來處理此文件類型。 web3-反應/錢包連接

Question

當我嘗試使用 web3-react/core 將 web2-react/walletconnect-connector 與 web3-react 集成時。 其他錢包，如 portis、metamask、fortmatic 和其他一些錢包都可以正常工作，但是當我使用 wallet-connector 或 walletlink 時，它給出了錯誤。 我使用了這個代碼 web3-react github repo。 獲取運行時錯誤。

提供者

import {
    Web3ReactProvider,
} from '@web3-react/core';
import { Web3Provider } from '@ethersproject/providers';

function getLibrary(provider: any) {
    const library = new Web3Provider(provider);
    library.pollingInterval = 12000;
    return library;
}
ReactDOM.render(
    <Web3ReactProvider getLibrary={getLibrary} >
        <Start />
    </Web3ReactProvider>,
    document.getElementById('root') as HTMLElement
);

連接器代碼

import { WalletConnectConnector } from '@web3-react/walletconnect-connector';
export const walletconnect = new WalletConnectConnector({
    rpc: { 1: 'https://mainnet.infura.io/v3/84842078b09946638c03157f83405213' },
    qrcode: true,
});

這是錯誤

./node_modules/eth-json-rpc-filters/node_modules/pify/index.js
Module parse failed: Unexpected token (44:2)
You may need an appropriate loader to handle this file type.
|               errorFirst: true,
|               promiseModule: Promise,
|               ...options
|       };

封裝 Json

 { 
 "name": "my-app",
 "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@ant-design/icons": "^2.1.1",
        "@ethersproject/keccak256": "^5.4.0",
        "@ethersproject/providers": "^5.4.5",
        "@ethersproject/units": "^5.4.0",
        "@metamask/detect-provider": "^1.2.0",
        "@web3-react/abstract-connector": "^6.0.7",
        "@web3-react/authereum-connector": "^6.2.0",
        "@web3-react/core": "^6.1.9",
        "@web3-react/fortmatic-connector": "^6.1.6",
        "@web3-react/frame-connector": "^6.0.9",
        "@web3-react/injected-connector": "^6.0.7",
        "@web3-react/lattice-connector": "^6.1.9",
        "@web3-react/ledger-connector": "^6.1.9",
        "@web3-react/network-connector": "^6.1.9",
        "@web3-react/portis-connector": "^6.1.9",
        "@web3-react/squarelink-connector": "^6.1.9",
        "@web3-react/torus-connector": "^6.1.9",
        "@web3-react/trezor-connector": "^6.1.9",
        "@web3-react/walletconnect-connector": "^6.2.4",
        "@web3-react/walletlink-connector": "^6.2.5",
        "antd": "^3.4.1",
        "async-redis": "^2.0.0",
        "bootstrap": "^5.1.0",
        "bscscan-api": "^1.0.1",
        "chessboardjs": "^0.0.1",
        "dotenv": "^4.0.0",
        "ethers": "^5.4.6",
        "express": "^4.16.3",
        "husky": "^7.0.2",
        "immutable": "^3.8.2",
        "lint-staged": "^11.1.2",
        "node-cron": "^3.0.0",
        "node-schedule": "^1.3.0",
        "nodemon": "^2.0.13",
        "normalize.css": "^8.0.0",
        "prettier": "^2.3.2",
        "react": "^16.3.1",
        "react-copy-to-clipboard": "^5.0.4",
        "react-countdown-circle-timer": "^2.5.4",
        "react-dom": "^16.3.1",
        "react-router": "^5.2.1",
        "react-router-dom": "^5.3.0",
        "react-scripts-ts": "^2.15.1",
        "react-spring": "^9.2.5",
        "react-toastify": "^8.0.3",
        "redis": "^2.8.0",
        "shortid": "^2.2.8",
        "socket.io": "^2.1.0",
        "socket.io-client": "^2.1.0",
        "toasted-notes": "^3.2.0",
        "web3": "^1.6.0"
    },
    "scripts": {
        "start": "react-scripts-ts start",
        "server": "server/index.js",
        "nodemon": "nodemon server/index.js",
        "build": "react-scripts-ts build",
        "test": "react-scripts-ts test --env=jsdom",
        "eject": "react-scripts-ts eject",
        "create:component": "./node_modules/hygen/lib/bin.js component create",
        "create:store:item": "./node_modules/hygen/lib/bin.js store create",
        "heroku-postbuild": "yarn run build"
    },
    "jest": {
        "moduleNameMapper": {
            "^react-native$": "react-native-web",
            "@App/(.*)": "<rootDir>/src/$1"
        }
    },
    "devDependencies": {
        "@types/history": "^4.6.2",
        "@types/jest": "^22.2.2",
        "@types/node": "^9.6.2",
        "@types/react-dom": "^16.0.4",
        "typescript": "^2.9.2"
    }
 }

我嘗試了大約 3 天，但仍然沒有運氣。 請幫我解決一下這個。

Answer 1

在為他們降級以下版本后，它能夠再次工作。

Answer 2

我在 vue 項目中，在 build/webpack.base.conf.js 添加

{
    test: /\.js$/,
    loader: 'babel-loader',
    include: [
      resolve('src'),
      resolve('test'),
      resolve('node_modules/webpack-dev-server/client'),
      resolve('node_modules/web3-eth-accounts/lib'),
      resolve('node_modules/web3-core-helpers/lib'),
      resolve('node_modules/web3-eth-contract/lib'),
      resolve('node_modules/web3-core-method/lib')
    ]
  },

錯誤原因是 web3.js 語法不支持 {...options, ...otherOptions}，它是

Object.assing(options, {
    a: 'xxx',
    b: 'xxx
})