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

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

[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;

[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) ✗