ChainUnsupportedError and Module not found: Can't resolve '@web3-react/walletconnect-connector'

Hello, I am trying to use use-wallet, but there is no way to make it work.

It gives me the following error:

Module not found: Can't resolve '@web3-react/walletconnect-connector' in 
'/Users/[REDACTED]/Documents/use-wallet-ts/node_modules/use-wallet/dist/esm'

Node, NPM, MetaMask and Google Chrome versions:

$ node -v
  v14.18.0

$ npm -v
  6.14.15

MetaMask Version
10.2.2

Google Chrome
Version 94.0.4606.81 (Official Build) (x86_64) in MacOS Big Sur 11.6

My process has been:

$ npx create-react-app use-wallet-ts --template typescript
$ cd use-wallet-ts

Install use-wallet:

$ yarn add use-wallet token-amount

Replace all the content of src/App.tsx with:

          import {
            ConnectionRejectedError,
            useWallet,
          } from 'use-wallet'
          import TokenAmount from 'token-amount';

          function App() {
            const wallet = useWallet()
            const blockNumber = wallet.getBlockNumber()
            const activate = (connector: any) => wallet.connect(connector)

            return (
              <>
                <h1>use-wallet</h1>
                DEBUG: <code>{JSON.stringify(wallet)}</code>
                <br />
                <br />
                {(() => {
                  if (wallet.error?.name) {
                    return (
                      <p>
                        <span>
                          {wallet.error instanceof ConnectionRejectedError
                            ? 'Connection error: the user rejected the activation'
                            : wallet.error.name}
                        </span>
                        <button onClick={() => wallet.reset()}>retry</button>
                      </p>
                    )
                  }

                  if (wallet.status === 'connecting') {
                    return (
                      <p>
                        <span>Connecting to {wallet.connector}…</span>
                        <button onClick={() => wallet.reset()}>cancel</button>
                      </p>
                    )
                  }

                  if (wallet.status === 'connected') {
                    return (
                      <p>
                        <span>Connected.</span>
                        <button onClick={() => wallet.reset()}>disconnect</button>
                      </p>
                    )
                  }

                  return (
                    <div className="connect">
                      <div className="connect-label">Connect:</div>
                      <div className="connect-buttons">
                        <button onClick={() => activate('injected')}>injected</button>
                      </div>
                    </div>
                  )
                })()}

                {wallet.status === 'connected' && (
                  <>
                    <p>
                      <span>Account:</span>
                      <span>{wallet.account}</span>
                    </p>
                  </>
                )}

                {wallet.account && (
                  <p>
                    <span>Balance:</span>
                    <span>
                      {wallet.balance === '-1'
                        ? '…'
                        : TokenAmount.format(wallet.balance, 18, { symbol: 'ETH' })}
                    </span>
                  </p>
                )}

                {wallet.status === 'connected' && (
                  <p>
                    <span>Block:</span> <span>{blockNumber || '…'}</span>
                  </p>
                )}
              </>
            )
          }

          export default App;

And replace all the content of src/index.tsx with:

          import ReactDOM from 'react-dom';
          import './index.css';
          import App from './App';
          import { UseWalletProvider } from 'use-wallet'

          ReactDOM.render(
            <UseWalletProvider
              // @ts-ignore
              chainId={1}
              connectors={{
                injected: {
                  chainId: [1, 4],
                },
              }}
            >
              <App />
            </UseWalletProvider>,
            document.getElementById('root')
          );

Looking the package.json:

$ cat package.json
          {
            "name": "use-wallet-ts",
            "version": "0.1.0",
            "private": true,
            "dependencies": {
              "@testing-library/jest-dom": "^5.11.4",
              "@testing-library/react": "^11.1.0",
              "@testing-library/user-event": "^12.1.10",
              "@types/jest": "^26.0.15",
              "@types/node": "^12.0.0",
              "@types/react": "^17.0.0",
              "@types/react-dom": "^17.0.0",
              "react": "^17.0.2",
              "react-dom": "^17.0.2",
              "react-scripts": "4.0.3",
              "typescript": "^4.1.2",
              "use-wallet": "^0.11.0",
              "token-amount": "^0.3.0",
              "web-vitals": "^1.0.1"
            },
            "scripts": {
              "start": "react-scripts start",
              "build": "react-scripts build",
              "test": "react-scripts test",
              "eject": "react-scripts eject"
            },
            "eslintConfig": {
              "extends": [
                "react-app",
                "react-app/jest"
              ]
            },
            "browserslist": {
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ],
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ]
            }
          }

Start the App (and 1st Error message):

$ yarn start
          [...]
          [...]
          =============
          Failed to compile.

          ./node_modules/use-wallet/dist/esm/index.js
          Module not found: Can't resolve '@web3-react/walletconnect-connector' in '/Users/[REDACTED]/Documents/use-wallet-ts/node_modules/use-wallet/dist/esm'
          Compiling...
          
          Failed to compile.

          ./node_modules/use-wallet/dist/esm/index.js
          Module not found: Can't resolve '@web3-react/walletconnect-connector' in '/Users/[REDACTED]/Documents/use-wallet-ts/node_modules/use-wallet/dist/esm'

I have gotten it to boot, but using use-wallet version 0.8.1 ("use-wallet": "^0.8.1",).

$ cat package.json
          {
            "name": "use-wallet-ts",
            "version": "0.1.0",
            "private": true,
            "dependencies": {
              "@testing-library/jest-dom": "^5.11.4",
              "@testing-library/react": "^11.1.0",
              "@testing-library/user-event": "^12.1.10",
              "@types/jest": "^26.0.15",
              "@types/node": "^12.0.0",
              "@types/react": "^17.0.0",
              "@types/react-dom": "^17.0.0",
              "react": "^17.0.2",
              "react-dom": "^17.0.2",
              "react-scripts": "4.0.3",
              "typescript": "^4.1.2",
              "use-wallet": "^0.8.1",
              "token-amount": "^0.3.0",
              "web-vitals": "^1.0.1"
            },
            "scripts": {
              "start": "react-scripts start",
              "build": "react-scripts build",
              "test": "react-scripts test",
              "eject": "react-scripts eject"
            },
            "eslintConfig": {
              "extends": [
                "react-app",
                "react-app/jest"
              ]
            },
            "browserslist": {
              "production": [
                ">0.2%",
                "not dead",
                "not op_mini all"
              ],
              "development": [
                "last 1 chrome version",
                "last 1 firefox version",
                "last 1 safari version"
              ]
            }
          }

I have deleted node_modules and reinstalled everything from 0, and started the App

$ rm -r node_modules
$ yarn OR yarn install
$ yarn start

And this time it starts fine, but it doesn’t work as expected.

When I click the button “injected”, MetaMask pops requesting permission to connect, I click the “Next” button:

The status on the DEBUG information changes to “connecting”. And when I click on the button “Connect” on MetaMask it’s changes to ChainUnsupportedError ChainUnsupportedError:

The strangest thing is that in Metamask it tells me that I am connected.

The retry button does not work, it gives the same problem again. Disconnecting the wallet from MetaMask doesn’t work either.

Content of wallet variable (same as DEBUG information):

{"_web3ReactContext":{"active":false},"account":null,"balance":"-1","chainId":1,"connector":null,"connectors":{"injected":{"config":{"chainId":[1,4]}},"frame":{},"fortmatic":{},"portis":{},"provided":{},"authereum":{},"squarelink":{},"torus":{},"walletconnect":{},"walletlink":{}},"error":{"name":"ChainUnsupportedError","message":"Unsupported chain: Unknown. Required chain: Mainnet (Chain ID: 1)."},"networkName":"Mainnet","status":"error","type":null}

2nd Error message:

Unsupported chain: Unknown. Required chain: Mainnet (Chain ID: 1).

Any help? Thanks.

[githubdoramon]

Yep, 6.2.6 is broken… I will release use wallet 0.12.1 in a few minutes

[githubdoramon]

Great news guys… closing this one!