Nextjs 13 and Ethers properties of undefined (reading 'Web3Provider')

Question

I'm trying to access the ethers provider like this in Nextjs 13.0.1:

import { ethers } from "ethers";

export const signMessage = () => {
  
  const provider = new ethers.providers.Web3Provider(window.ethereum);
  const signer = provider.getSigner();

  try {
    signer.signMessage("Hey hey").then((result) => {
      console.log(result);
    });
  } catch (error) {
    // handle error
    console.log(error);
  }
};

But it always gives me the error:

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'Web3Provider')

I've tried different providers but always get the error message above.

Someone knows why it's working for Nextjs 12 but not for Next 13?

Answer 1

I assume you are using the beta version of ethers in version 6.x, check your package.json. I can confirm this error, can reproduce it in [email protected] but also encountered this error in some other Node.js projects.

Resolve the issue by ..

• Deleting your /node_modules and package-lock.json / yarn.lock
• Downgrading ethers in your package.json to version 5.x, see ethers releases: https://github.com/ethers-io/ethers.js/releases
• Re-installing packages. I'm running [email protected] in [email protected] without errors.

Hope that fixes it for you as well!

Answer 2

Ethers.js has changed a lot from version 5 to version 6. You are probably using ethers.js version 6, but attempting to use version 5 methods and properties.

In the "migrating from v5" section of their v6 docs, you can see some of the breaking changes. Specifically, the provider section tells you that the new syntax is:

const provider = new ethers.BrowserProvider(window.ethereum);

https://docs.ethers.org/v6/migrating/#migrate-providers

Downgrading the package will fix the problem, but I'm not sure if version 5 will receive future updates. The best solution is to use the latest version 6 unless there's a bug or important features that it lacks (which it shouldn't, because it's just a continuation of ethers.js).

Answer 3

I had the same issue. Fix it with:

npm uninstall ethers
npm i -S [email protected]

Answer 4

There is an update in ethers version of connecting to metamask you can check in ethers version 6 documentation

let signer = null;

let provider;

if (window.ethereum == null) {

    console.log("MetaMask not installed; using read-only defaults")
    provider = ethers.getDefaultProvider()

} else {

    provider = new ethers.BrowserProvider(window.ethereum)
    signer = await provider.getSigner();
}

use this code it will remove the error

Answer 5

This is not a new issue in Next.js 13 - it existed in previous versions as well. The issue may be that your code is being executed on the server side when you don't expect it to be, or you might have changed how your components/pages are being rendered between versions.

To resolve this issue, you could ensure that your Ethereum related code only runs on the client side, where the window object is available. Here is how you could refactor your code to achieve this:

    import { ethers } from "ethers";

export const signMessage = async () => {
  if (typeof window === 'undefined') {
    // We are on the server, exit early.
    return;
  }

  try {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const result = await signer.signMessage("Hey hey");
    console.log(result);
  } catch (error) {
    // handle error
    console.log(error);
  }
};

By adding a check for typeof window === 'undefined', we can make sure that the Ethereum related code only executes on the client side, where the window object is available.

Make sure to call signMessage function only in lifecycle methods or hooks that are guaranteed to run only on the client-side, such as componentDidMount in a class component, or useEffect in a functional component. Do not call this function directly in the body of a Next.js page or component, as that code can run on both server and client sides.

Answer 6

For people using YARN -

Check the version of ethers package from package.json file. If it's 6.x then -

yarn remove ethers -> Remove existing ethers package & references

yarn add [email protected] -> Load 5.x version of ethers to support your current code

Also please make sure to wrap the contract address in single / double quotes. Sample address below -

const contractAddress = '0x5FbDB2315678abcde367f032d93F642f64180aa3';

Answer 7

i am already using [email protected] still i'm encountering the same error here's the code

const getEthereumContract = () => {
    if (!ethereum) {
        console.log("No Ethereum object found. Make sure you have MetaMask installed.");
        return null;
    }

    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const signer = provider.getSigner();
    const transactionContract = new ethers.Contract(contractAddress, contractABI, signer);

    console.log({
        provider, 
        signer,
        transactionContract
    });

    return transactionContract;
}