React (opts:) not working, am i missing dependency?

Question

I have a basic walletconnect web3 module here.

I am following a video from https://www.youtube.com/watch?v=L65gP0cGC30 but it errors (opts:) on the example video the text actually is grayed out so it looks like the syntax is different to mine.

import './App.css';
import Web3Modal from "web3modal";

const { ethers } = require("ethers");


const providerOptions = {


}


function App() {

async function connectWallet () {
    try {
        let web3Modal = new Web3Modal({
            cacheProvider: false,
            providerOptions,
         });
        const web3ModalInstance = await web3Modal.connect(opts:);
        const web3ModalProvider = new ethers.providers.Web3Provider(web3ModalInstance);
console.log(web3ModalProvider);
    } catch(error){

        console.error(error);

    }


}



  return (
    <div className="App">
      <header className="App-header">
  
      <h1>Web3Modal</h1>

      <button onClick={connectWallet}>
      Connect Wallet
      </button>

      </header>
    </div>
  );
}

export default App;

I have tried to put curly brackets, semicolon, but no luck.

This is the error

  Line 22:63:  Parsing error: Unexpected token (22:63)

and line 22 is

const web3ModalInstance = await web3Modal.connect(opts:);

Answer 1

That version of Web3Modal doesn't work any more and has been deprecated. Try v3 check docs here: https://docs.walletconnect.com/web3modal/react/about?platform=ethers