[Ethereum] Module parse failed: Cannot use keyword ‘await’ outside an async function

I'm getting an error message. I set my tsconfig.json to use "es2017" for await. It's still not compiling. Have no idea how to configure Web3Modal to a Button.

Link to GitHub: https://github.com/GoGetterMeme/usedapp

./src/App.tsx 30:17
Module parse failed: Cannot use keyword 'await' outside an async function (30:17)
File was processed with these loaders:

./node_modules/@pmmmwh/react-refresh-webpack-plugin/loader/index.js
./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
| });

const provider = await web3Modal.connect();
| const web3 = new 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

Best Answer

The actual issue here is that you are using the await at the top level of the JS, you would avoid the issue by doing something like this (but it's worth noting that you are probably going to run into other issues after this - since there's nothing really being done with that web3 variable):

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