Typescript errors when creating provider in ethersv5

[TomAFrench]

✅ Prerequisites

• Did you perform a cursory search of open issues? Is this bug already reported elsewhere?
• Are you running the latest SDK version?
• Are you reporting to the correct repository (magic-sdk)?

🐛 Description

Trying to create an ethersv5 Web3Provider using magic.rpcProvider as described in docs results in a Typescript error

🧩 Steps to Reproduce

1. Install magic-sdk and ethersv5 in a typescript environment
2. Attempt to construct a Web3Provider using magic

🤔 Expected behavior

Types to match such that no error appears

😮 Actual behavior

Typescript reports that RPCProviderModule can't be assigned to ExternalProvider | JsonRpcFetchFunc

💻 Code Sample

I'm afraid I can't share the repo but here's the relevant code

import React, { createContext, ReactElement, useContext } from "react";
import { Web3Provider } from "@ethersproject/providers";
import { Magic } from "magic-sdk";

interface Props {
  children: ReactElement | ReactElement[];
}

interface State {
  magic?: Magic;
}

export const MagicContext = createContext({} as State);

export function useMagicContext(): State {
  return useContext(MagicContext);
}

function MagicProvider({ children }: Props) {
  // WARNING: This requires a domain whitelist to be set up on https://dashboard.magic.link/
  // Otherwise users are vulnerable to a phishing attack on other websites
  const MAGIC_API_KEY = "pk_test_5EF8CA802033ADE6";

  const customNodeOptions = {
    rpcUrl: "http:https://127.0.0.1:8545",
    chainId: 31337, // networkId of buidlerEVM test network
  };

  const magic = new Magic(MAGIC_API_KEY, {
    network: customNodeOptions,
  });

  return (
    <MagicContext.Provider value={{ magic }}>{children}</MagicContext.Provider>
  );
}

export const useProvider = (): Web3Provider | null => {
  const { magic } = useMagicContext();
  return typeof magic?.rpcProvider !== "undefined"
    ? new Web3Provider(magic.rpcProvider)
    : null;
};

export default MagicProvider;

🌎 Environment

Software	Version(s)
magic-sdk	2.4.8
Browser	N/A
yarn	1.22.4
Operating System	Linux

[smithki]

Possible dupe or related to #83?

For now, does casting magic.rpcProvider to any fix your issue?

[TomAFrench]

Ah whoops, yeah this is a duplicate. I'm using // @ts-ignore for that line at the moment.

[smithki]

Ah whoops, yeah this is a duplicate. I'm using // @ts-ignore for that line at the moment.

This works, but I recommend casting to any so that any other type errors on that line become apparent 😃

I'll try to solve the typings issues between Web3JS and Ethers soon!

[gigamesh]

I'm on the latest version, but I'm also getting this error. I'm a bit worried using any will result in a mysterious bug later. Is there a fix?

[smithki]

I'm on the latest version, but I'm also getting this error. I'm a bit worried using any will result in a mysterious bug later. Is there a fix?

This one fell off the map for us a bit as it's strictly related to typings and has a known workaround (casting to any). I know it's not the prettiest solution, but considering that the Web3 provider interface is stabilized and standardized by the Ethereum foundation, I'm comfortable saying that the any typing shouldn't cause you backwards compatibility issues in the future.
We are open to a PR to update the typings, if you're game!

[gigamesh]

All good. thanks for the crazy fast response!