模块解析失败:不能在异步函数外使用关键字“等待”

Question

我收到一条错误信息。我将我的tsconfig.json设置为使用"es2017“来等待。它还是没有编译。不知道如何将Web3Modal配置为按钮。

链接到GitHub：https://github.com/GoGetterMeme/usedapp

./src/App.tsx 30:17模块解析失败:无法在异步函数(30:17)外部使用关键字“等待”，这些加载程序处理了文件：

• ./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
• ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js您可能需要一个额外的加载程序来处理这些加载程序的结果。)；

const =等待web3Modal.connect()；provider web3 =新Web3(provider)；|>

import React from 'react';
import { ChainId, DAppProvider } from "@usedapp/core";
import { Box, Button, Container } from "@material-ui/core";
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";

const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider, // required
    options: {
      infuraId: process.env.REACT_APP_INFURA_ID // required
    }
  }
};

const web3Modal = new Web3Modal({
  network: "rinkeby", // optional
  cacheProvider: true, // optional
  providerOptions // required
});

const provider = await web3Modal.connect();

const web3 = new Web3(provider);



function App() {
  return (
    <DAppProvider config={{
      supportedChains: [ChainId.Rinkeby],
      notifications: {
        expirationPeriod: 1000,
        checkInterval: 1000
      }
    }}>
      <Container maxWidth="md">
        <Box>
          <Button variant="contained" color="primary">Connect</Button>
        </Box>
      </Container>
    </DAppProvider>
  )
}

export default App

Answer 1

这里的实际问题是，您在JS的顶层使用await，您可以通过这样的操作来避免这个问题(但值得注意的是，在此之后您可能会遇到其他问题--因为web3变量并没有真正进行任何操作)：

import React from 'react';
import { ChainId, DAppProvider } from "@usedapp/core";
import { Box, Button, Container } from "@material-ui/core";
import Web3 from "web3";
import Web3Modal from "web3modal";
import WalletConnectProvider from "@walletconnect/web3-provider";

const providerOptions = {
  walletconnect: {
    package: WalletConnectProvider, // required
    options: {
      infuraId: process.env.REACT_APP_INFURA_ID // required
    }
  }
};

const web3Modal = new Web3Modal({
  network: "rinkeby", // optional
  cacheProvider: true, // optional
  providerOptions // required
});

function App() {

  const connectWallet = async () => {
    const provider = await web3Modal.connect();
    const web3 = new Web3(provider);
  }

  return (
    <DAppProvider config={{
      supportedChains: [ChainId.Rinkeby],
      notifications: {
        expirationPeriod: 1000,
        checkInterval: 1000
      }
    }}>
      <Container maxWidth="md">
        <Box>
          <Button onClick={() => connectWallet()} variant="contained" color="primary">Connect</Button>
        </Box>
      </Container>
    </DAppProvider>
  )
}

export default App

Answer 2

您可能使用了太旧的node版本。

请查看何时顶层等待到达的Node.js支持。