Property 'request' does not exist on type 'MetaMaskEthereumProvider'.ts(2339)

[GerLC]

I am getting this using the request similar to the preview example:

 import detectEthereumProvider from "@metamask/detect-provider";

  const provider = await detectEthereumProvider({
    mustBeMetaMask: true,
  });

  if (provider) {
    const accounts = provider?.request?.({
          method: "eth_requestAccounts",
   });

    return accounts?.[0];
  };

[mcmire]

Hi @GerLC, that's a great point. We should update that example so that it works out of the box. Minimally we should export MetaMaskEthereumProvider so that you can extend it if you like:

import detectEthereumProvider, { MetaMaskEthereumProvider } from '@metamask/detect-provider';

type RequestArguments = {
  method: string;
  params?: unknown[] | Record<string, unknown>;
}

type Provider = MetaMaskEthereumProvider & {
  request<T>: (args: RequestArguments) => Promise<T>;
}

async function accessDecentralizedWeb() {
  const provider = await detectEthereumProvider<Provider>();

  if (provider) {
    // Now you can access the decentralized web! For instance:
    const chainId = await provider.request({ 'eth_chainId' });
    // ... do something with the chain ID ...
  } else {
    // If the provider is not detected, detectEthereumProvider() resolves to null.
    // You may want to inform the user to install MetaMask somehow, but for now:
    console.error('Please install MetaMask!');
  }
}

accessDecentralizedWeb();

[GerLC]

Hello @mcmire thank you so much for your response, but the problem with importing { MetaMaskEthereumProvider } is that it says: Module '"@metamask/detect-provider"' has no exported member 'MetaMaskEthereumProvider'. Maybe it is not exporting the interface MetaMaskEthereumProvider only detectEthereumProvider

[mcmire]

Absolutely — that's not something we're doing right now, but that's something that we would need to do in order to make that possible.

[jonny-dungeons]

Is there a solution to this issue? If not then this library doesn't seem like a viable solution if this is an issue. The library looked promising so please do tell if there is a workaround...

[mcmire]

@mydungeon Yes, in lieu of importing that type, you can always copy it from the source code. Here's an example that should work today:

type MetaMaskEthereumProvider = {
  isMetaMask?: boolean;
  once(eventName: string | symbol, listener: (...args: any[]) => void): this;
  on(eventName: string | symbol, listener: (...args: any[]) => void): this;
  off(eventName: string | symbol, listener: (...args: any[]) => void): this;
  addListener(eventName: string | symbol, listener: (...args: any[]) => void): this;
  removeListener(eventName: string | symbol, listener: (...args: any[]) => void): this;
  removeAllListeners(event?: string | symbol): this;
}

type Provider = MetaMaskEthereumProvider & {
  request<T>: (args: RequestArguments) => Promise<T>;
}

async function accessDecentralizedWeb() {
  const provider = await detectEthereumProvider<Provider>();

  if (provider) {
    // Now you can access the decentralized web! For instance:
    const chainId = await provider.request({ 'eth_chainId' });
    // ... do something with the chain ID ...
  } else {
    // If the provider is not detected, detectEthereumProvider() resolves to null.
    // You may want to inform the user to install MetaMask somehow, but for now:
    console.error('Please install MetaMask!');
  }
}

accessDecentralizedWeb();

With regard to this library in general, we rely in part on community contributions, so if there's anything missing, do feel free to submit a pull request and we will be happy to merge it :)

[RauppRafael]

why is request() not in the MetaMaskEthereumProvider interface?

[npetridis]

I am still getting the same error. Is there any progress on this issue?

[mcmire]

Yes, we are actively working on adding a better type here. It's a bit tricky because we have to make it aligned with other parts of MetaMask. We'll post more when we have it.

[rdcm]

@mcmire Hi, what about just adding export keyword for MetaMaskEthereumProvider? This example not working without export. If you agree I could make PR.

[rdcm]

Hmm, looks like already fixed, but not published