Type error: Type '(string | (string | null)[] | null)[]' is not assignable to type '(string | string[])[]'.

[esemeniuc]

Describe the bug
When building with webpack 5 and Nextjs 10.2.0 with ethers 5.1.4, I get the following error:

info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
Failed to compile.

./node_modules/@ethersproject/providers/src.ts/base-provider.ts:68:5
Type error: Type '(string | (string | null)[] | null)[]' is not assignable to type '(string | string[])[]'.
  Type 'string | (string | null)[] | null' is not assignable to type 'string | string[]'.
    Type 'null' is not assignable to type 'string | string[]'.

  66 |     if (data === "") { return [ ]; }
  67 | 
> 68 |     return data.split(/&/g).map((topic) => {
     |     ^
  69 |         if (topic === "") { return [ ]; }
  70 | 
  71 |         const comps = topic.split("|").map((topic) => {
error Command failed with exit code 1.

Reproduction steps

Run next build on my project

Environment:
Running via cli on the following:

Node 14.16.0
Arch linux
webpack 5 enabled
Nextjs 10.2.0
ethers 5.1.4
@typechain/ethers-v5 6.0.5
typechain 4.0.3

This is my tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "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"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

Search Terms
webpack 5
nextjs
ethers

[ricmoo]

That is odd. That means that your build is using your "strict" flag against ethers source (which has its tsconfig without the "strict" flag).

The next version (v5.2), which should be out this week adds null to the allowable types within the Filter, so this will be fixed then.

In the meantime, if you remove the "strict": true from your tsconfig.json, this should go away.

If you can find a better way to make TypeScript+WebPack properly follow to the .d.ts rather than checking the .ts source, that would be quite helpful too, as a few other configurations I’ve seen lately seem to check files they shouldn’t even be considering.

[ricmoo]

Could the exclude be incorrect? I haven’t been very creative with my TS globs, but maybe it needs node_modules/**? Just a guess, thinking about it. Since it should be looking at that file anyways.

[esemeniuc]

The exclude hasn't changed since the repo setup, but I will try downgrading nextjs. So far with nextjs 10.2.0 with webpack 4, it has the same error:

info  - Using webpack 4. Reason: future.webpack5 option disabled https://nextjs.org/docs/messages/webpack5
Failed to compile.

./node_modules/@ethersproject/providers/src.ts/base-provider.ts:68:5
Type error: Type '(string | (string | null)[] | null)[]' is not assignable to type '(string | string[])[]'.
  Type 'string | (string | null)[] | null' is not assignable to type 'string | string[]'.
    Type 'null' is not assignable to type 'string | string[]'.

  66 |     if (data === "") { return [ ]; }
  67 | 
> 68 |     return data.split(/&/g).map((topic) => {
     |     ^
  69 |         if (topic === "") { return [ ]; }
  70 | 
  71 |         const comps = topic.split("|").map((topic) => {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

[esemeniuc]

Running with the following in tsconfig.json:

  "exclude": [
    "node_modules/**"
  ]

still outputs the same thing

[esemeniuc]

Turning off strict was the only solution (tried older versions of nextjs and ethers, neither helped)

[ricmoo]

Thanks for letting me know. The next major version (v6) will also have strict enabled, but that is still a month or two away.

If anything else comes to mind, feel free to update this issue.

[esemeniuc]

Sounds good, looking forward to it! Also thank you for creating such a wonderful library :)

[ricmoo]

Did 5.2 fix this issue, by the way?

[wilwade]

@esemeniuc I had this issue and it ended up that I was importing from @ethersproject/providers/src.ts instead of ethers or @ethersproject/providers. In my case I was typing the JsonRpcProvider.

(Updated thanks to @ricmoo )

Causes Type issues

import { JsonRpcProvider } from "@ethersproject/providers/src.ts/json-rpc-provider";

let provider: JsonRpcProvider;

Works

import { JsonRpcProvider } from "@ethersproject/providers";

let provider: JsonRpcProvider;

Also Works

import { ethers } from "ethers";

let provider: ethers.providers.JsonRpcProvider;

[ricmoo]

What was the Type issue? I would expect it to fully fail, since the src.ts/ is TypeScript source, not generated JavaScritpt…

Can you try import { JsonRpcProvider } from "@ethersproject/providers"?

Ethers isn’t designed for pulling things out of the internal folders or files.

[wilwade]

@ricmoo That is correct "@ethersproject/providers" works. I was not clear enough. @ethersproject/providers/src.ts... was what Intellij picked up at first that's what can cause the error.

[ricmoo]

Oh! Thanks. Is IntelliJ the auto-completion part of VSCode? How does it decide which files to pick? It seems weird it targets the .ts file… Is there any way to steer it through configuration?

[wilwade]

I'm not sure. Once I tried your import, it started importing it correctly after that. Sometimes it gets a bit autocomplete happy and digs into stuff that really shouldn't be imported (like .../src.ts/json-rpc-provider).

My guess is that something similar happened to @esemeniuc

[esemeniuc]

@ricmoo I retested with the latest 5.3.0 release, and I see this error:

➜  client git:(master) ✗ yarn build
yarn run v1.22.10
$ next build
info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
Failed to compile.

./node_modules/@ethersproject/providers/src.ts/base-provider.ts:67:5
Type error: Type '(string | (string | null)[] | null)[]' is not assignable to type '(string | string[])[]'.
  Type 'string | (string | null)[] | null' is not assignable to type 'string | string[]'.
    Type 'null' is not assignable to type 'string | string[]'.

  65 |     if (data === "") { return [ ]; }
  66 |
> 67 |     return data.split(/&/g).map((topic) => {
     |     ^
  68 |         if (topic === "") { return [ ]; }
  69 |
  70 |         const comps = topic.split("|").map((topic) => {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  client git:(master) ✗

[esemeniuc]

Oh! Thanks. Is IntelliJ the auto-completion part of VSCode? How does it decide which files to pick? It seems weird it targets the .ts file… Is there any way to steer it through configuration?

IntelliJ is a code editor from Jetbrains, but VSCode does use Intellisense, where it indexes functions and types from code. I use Webstorm (based on IntelliJ, but for JS).

IntelliJ/Webstorm will index all the files based on defaults or source directory configuration, and it will index many different file types. Folders can be manually excluded, but I am not very familiar with the process

[zemse]

@esemeniuc just to confirm, can you try removing your lock file and node_modules and reinstalling it?

[esemeniuc]

@zemse I ran rm -rf node_modules yarn.lock && yarn. This is the output:

➜  client git:(master) ✗ yarn build
yarn run v1.22.10
$ next build
info  - Using webpack 5. Reason: no custom webpack configuration in next.config.js https://nextjs.org/docs/messages/webpack5
Failed to compile.

./node_modules/@ethersproject/providers/src.ts/base-provider.ts:67:5
Type error: Type '(string | (string | null)[] | null)[]' is not assignable to type '(string | string[])[]'.
  Type 'string | (string | null)[] | null' is not assignable to type 'string | string[]'.
    Type 'null' is not assignable to type 'string | string[]'.

  65 |     if (data === "") { return [ ]; }
  66 |
> 67 |     return data.split(/&/g).map((topic) => {
     |     ^
  68 |         if (topic === "") { return [ ]; }
  69 |
  70 |         const comps = topic.split("|").map((topic) => {
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
➜  client git:(master) ✗