What To Do Failed Compiling?

Question

I am getting an error while running the command npm start. The file is created in PancakeSwap Frontend and I've been trying to fix this for a while, thanks for your help :)

Here is my App.js code:

import React, { useState, useEffect  } from "react";
import SimpleStorageContract from "./contracts/SimpleStorage.json";
import getWeb3 from "./getWeb3";
import BlockchainContext from './BlockchainContext.js';

import "./App.css";

function App() {
    const [storageValue, setStorageValue] = useState(undefined);
    const [web3, setWeb3] = useState(undefined);
    const [accounts, setAccounts] = useState([]);
    const [contract, setContract] = useState([]);

    useEffect(() => {
        try {
              // Get network provider and web3 instance.
               const web3 = await getWeb3();
        
        //             // Use web3 to get the user's accounts.
                           const accounts = await web3.eth.getAccounts();
        
        //                         // Get the contract instance.
                                       const networkId = await web3.eth.net.getId();
                                             const deployedNetwork = SimpleStorageContract.networks[networkId];
                                                   const contract  = new web3.eth.Contract(
                                                           SimpleStorageContract.abi,
                                                                   deployedNetwork && deployedNetwork.address,
                                                                         );
        
                                                                               // Set web3, accounts, and contract to the state, and then proceed with an                                                             // example of interacting with the contract's methods.
                 
            setWeb3(web3);
            setAccounts(accounts);
            setContract(contract);;
            
            this.setState({ web3, accounts, contract: instance                       } catch (error) {
                                                                        // Catch any errors for any of the above operations.
                                                                       alert(
                                                                      `Failed to load web3, accounts, or contract. Check console for details.`,
                                                                                                                         );
                                                                                                                               console.error(error);
        
        const init = async() => {
        }
        init();
    }, []);

    useEffect(() => {
            const load = async () => {
            // Stores a given value, 5 by default.
             await contract.methods.set(5).send({ from: accounts[0] });
        
        //         // Get the value from the contract to prove it worked.
                     const response = await contract.methods.get().call();
        
        //                 // Update state with the result.
                     setStorageValue(response);       
        }
        if(typeof web3 !== 'undefined'
            && typeof account !== 'undefined'
            && typeof contract !== 'undefined'{
            load();
            }
    }, [web3, accounts, contract]);

    if(typeof web3 === 'undefined') {
    return <div>Loading Web3, account, and contract...</div>;
    }

      return (
                <div className="App">
          <BlockchainContext.Provider value={{web3, accounts, contract}}>
                  <h1>Good to Go!</h1>
                  <p>Your Truffle Box is installed and ready.</p>
                  <h2>Smart Contract Example</h2>
                  <p>
                    If your contracts compiled and migrated successfully, below will show
                    a stored value of 5 (by default).
                  </p>
                  <p>
                    Try changing the value stored on <strong>line 42</strong> of App.js.
                  </p>
                  <div>The stored value is: {storageValue}</div>
          </BlockchainContext.Provider>
                </div>
              );

}

export default App;

And the error which I am getting is:

Failed to compile.

./src/App.js
  Line 17:23:  Parsing error: Can not use keyword 'await' outside an async function

  15 |      try {
  16 |            // Get network provider and web3 instance.
> 17 |             const web3 = await getWeb3();
     |                          ^
  18 |      
  19 |      //             // Use web3 to get the user's accounts.
  20 |                         const accounts = await web3.eth.getAccounts();

Answer 1

The code provided is pretty messy, but it looks like you are trying to use the await keyword in a synchronous function, specifically the function being passed as an argument into useEffect(). The await keyword can only be used inside asynchronous functions.
If you can, the easiest solution would be to make the function asynchronous by adding the async keyword (demonstrated below).

function App() {
    const [storageValue, setStorageValue] = useState(undefined);
    const [web3, setWeb3] = useState(undefined);
    const [accounts, setAccounts] = useState([]);
    const [contract, setContract] = useState([]);

    useEffect(async () => {

If that won't work, you could use .then() instead (demonstrated below), however this will require more work.

function App() {
    const [storageValue, setStorageValue] = useState(undefined);
    const [web3, setWeb3] = useState(undefined);
    const [accounts, setAccounts] = useState([]);
    const [contract, setContract] = useState([]);

    useEffect(() => {
        try {
              // Get network provider and web3 instance.
               getWeb3().then(web3=>{
                  // code goes here
               }).catch(err=>{
                  // error handling
               });        

I also recommend reading a little about async/await if you haven't already. This MDN article is a good place to start.