Why is typescript screaming at ethers' types?

[Benjythebee]

Heya, this might be an issue on my side but I want to get some better insight to what I might be doing wrong;

I have a small library written in Typescript that I want to use both on Nodejs and browsers and that library is using ethers;

The package json has

  "type": "commonjs",
    "dependencies": {
    "ethers": "^6.12.1",
    "node-fetch": "^2.7.0"
  },

and is built using tsc.

After building, I publish the library as @myProject/eth-utils

On nodejs I can import the built library via NPM and it will work fine, I can even use it in nodeJS project that runs ethers 5.9.0 and it will work nicely.

However, on a NextJS project (browser), when I load the library I get a bunch of typescript errors. Even when the project ethers version matches exactly the library's version.
For example this code

The error on signer is:

Argument of type 'import("c:/Users/Ben/Documents/Github Stuff/myProject/myProject.io/node_modules/ethers/lib.commonjs/providers/signer").Signer' is not assignable to parameter of type 'import("c:/Users/Ben/Documents/Github Stuff/myProject/myProject.io/node_modules/@myProject/eth-utils/node_modules/ethers/lib.commonjs/providers/signer").Signer'.
 Types of property 'provider' are incompatible.
   Type 'import("c:/Users/Ben/Documents/Github Stuff/myProject/myProject.io/node_modules/ethers/lib.commonjs/providers/provider").Provider | null' is not assignable to type 'import("c:/Users/LongPath/myProject.io/node_modules/@myProject/eth-utils/node_modules/ethers/lib.commonjs/providers/provider").Provider | null'.
     Type 'import("c:/Users/LongPath/myProject.io/node_modules/ethers/lib.commonjs/providers/provider").Provider' is not assignable to type 'import("c:/Users/LongPath/myProject.io/node_modules/@myProject/eth-utils/node_modules/ethers/lib.commonjs/providers/provider").Provider'.
     ...

It looks like it's comparing the types from my project (path c:/Users/Ben/Documents/Github Stuff/myProject/myProject.io/.../signer and the imported library path. .../myProject/myProject.io/node_modules/@myProject/eth-utils/node_modules/ethers/lib.commonjs/providers/signer and again, both the library and the project are using ethers 6.12.1

I have a feeling it might be some configuration when building / importing that I'm missing, but not too sure what, so I'm reaching out! Any ideas what I'm doing wrong?

my project's tsconfig

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es6",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
  "exclude": ["node_modules"]
}

my library's tsconfig:

{
    "compilerOptions": {
      "lib": ["es2020", "ES2021.String"],
      "module": "commonjs",
      "target": "es2019",
  
      "esModuleInterop": true,
      "strict": true
      "noImplicitAny": true
    
      "moduleResolution": "node",
      "sourceMap": false,
      "outDir": "dist",
      "baseUrl": ".",
  
      "declaration": true,
      "allowSyntheticDefaultImports": true,
      "resolveJsonModule": true,
  
      "paths": { "*": ["node_modules/*"] }
    },
    "exclude": ["node_modules"],
    "include": ["*"]
  }
  

[Chathura-Ahangama]

Facing the same issue here.Did you find any solution?

[ricmoo]

It looks like your configuration is trying to pick up the commonjs version. I’ve never used nexus, but how do you generally configure it to use ESM instead of commonjs? Ethers hooks into ESM by default, and only in cjs environments (like node using the main entry point) should it use that.

There are times where I force ESM semantics by naming my file with an mjs extension, but when pulling in another package that shouldn’t be necessary.

If you figure out a solution though, let me know and I’ll add it to the documentation.