[InjectedConnector] TypeError: Cannot read properties of undefined (reading 'prototype')

[EmmaG2]

Hi, when I try to create an instance of InjectedConnector, my applications brokes and get an error in the console.

I'm working with React + Ts, and react-router dom.

I'm using this code to create the instance:

import { InjectedConnector } from "@web3-react/injected-connector";

export const connector = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 42],
});

When I comment the code of the InjectedConnector, my applications work normally...

This is my App with the code commented

and this with the code uncommented

HomePage.tsx code

import { Button, Grid, Typography } from "@mui/material";
import { useWeb3React } from "@web3-react/core";
import { useEffect, useCallback } from "react";

import { injected } from "../../../config/web3";

export const HomePage = () => {
  const { activate, active, error, deactivate, account } = useWeb3React();

  const connectWallet = useCallback(() => {
    activate(injected);
    localStorage.setItem("preciouslyConnected", "true");
  }, [active]);

  const disconnectWallet = () => {
    deactivate();
    localStorage.removeItem("preciouslyConnected");
  };

  useEffect(() => {
    if (localStorage.getItem("preciouslyConnected") === "true") {
      connectWallet();
    }
  }, []);

  return (
    <Grid container>
      <Grid item xs={12}>
        <Typography component={"h1"} variant="h4">
          Web 3 React - Typescript app
        </Typography>
      </Grid>
      {active ? (
        <Grid item xs={12}>
          <Button variant="contained" color="error" onClick={connectWallet}>
            Connect wallet
          </Button>
        </Grid>
      ) : (
        <Grid item xs={12}>
          <Button variant="contained" color="error" onClick={disconnectWallet}>
            Connect wallet
          </Button>
        </Grid>
      )}
    </Grid>
  );
};

utils.ts code

import { InjectedConnector } from "@web3-react/injected-connector";

export const injected = new InjectedConnector({
  supportedChainIds: [1, 3, 4, 5, 10, 42, 31337, 42161],
});

[malay44]

Use this code for your injected variable in Homepage.tsx

const injected = new InjectedConnector({ supportedChainIds: [1, 3, 4, 5, 10, 42, 31337, 42161] })

And also, import InjectedConnector

import { InjectedConnector } from "@web3-react/injected-connector";

[MetaSeth]

@EmmaG2 I had the same problem. Apparently it's from vitejs, who doesn't let events be used from browser. You need to install a polyfill by yourself .

ps: looking at your first screenshot, you may will have the same problem with the buffer.

[NikolaGrujicic]

Hello @EmmaG2, i managed to solve this issue, you need to run yarn add web3-react or npm install web3-react and that is it, it will work 100%. 😁