Polkadot.js "signAndSend" function causes "signer" option to compile error

Question

I'm using the next.js framework to create a front-end application for polkadot.js.
I'm trying to get an account from extention and implement the "signAndSend" function to call the function of the contract I implemented. I'll paste the code snippet below.
I get the following compilation error, why?

code snipet:

    const injector = await web3FromSource(performingAccount.meta.source);
    const keyring = new Keyring({ type: 'sr25519' });
//    const accountKeyring = keyring.addFromUri('//Alice');
    const accountKeyring = keyring.addFromAddress(performingAccount.address);

    const flip = await contract.tx.flip({ value: 0, gasLimit: -1 });
    flip.signAndSend(accountKeyring,{signer:injector.signer},(result) => {
      if (result.status.isInBlock) {
        setResult("in a block");
      } else if (result.status.isFinalized) {
        setResult("finalized");
      }
    });

compile error:

(property) signer?: Signer | undefined
Type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/rpc-core/node_modules/@polkadot/types/types/extrinsic").Signer' is not assignable to type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/api-contract/node_modules/@polkadot/types/types/extrinsic").Signer'.
  Types of property 'update' are incompatible.
    Type '((id: number, status: H256 | ISubmittableResult) => void) | undefined' is not assignable to type '((id: number, status: ISubmittableResult | H256) => void) | undefined'.
      Type '(id: number, status: H256 | ISubmittableResult) => void' is not assignable to type '(id: number, status: ISubmittableResult | H256) => void'.
        Types of parameters 'status' and 'status' are incompatible.
          Type 'ISubmittableResult | H256' is not assignable to type 'H256 | ISubmittableResult'.
            Type 'ISubmittableResult' is not assignable to type 'H256 | ISubmittableResult'.
              Type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/api-contract/node_modules/@polkadot/types/types/extrinsic").ISubmittableResult' is not assignable to type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/rpc-core/node_modules/@polkadot/types/types/extrinsic").ISubmittableResult'.
                Types of property 'dispatchError' are incompatible.
                  Type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/api-contract/node_modules/@polkadot/types/interfaces/system/types").DispatchError | undefined' is not assignable to type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/rpc-core/node_modules/@polkadot/types/interfaces/system/types").DispatchError | undefined'.
                    Property '#private' is missing in type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/api-contract/node_modules/@polkadot/types/interfaces/system/types").DispatchError' but required in type 'import("/Users/shin.takahashi/develop/substrate/flipper_frontend/fillper_frontend/node_modules/@polkadot/rpc-core/node_modules/@polkadot/types/interfaces/system/types").DispatchError'.ts(2322)
Enum.d.ts(27, 5): '#private' is declared here.
submittable.d.ts(17, 5): The expected type comes from property 'signer' which is declared here on type 'Partial<SignerOptions>'

score 0 · Accepted Answer · answered Jul 15 '22 at 09:01

I don't understand the exact cause, but I solved this problem by following the steps below.

Update package.json.
remove node_modules directory.
Execute "npm install".

Package.json before modification:

{
  "name": "fillper_frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@polkadot/api": "^8.3.1",
    "@polkadot/api-contract": "^8.11.2",
    "@polkadot/extension-dapp": "^0.43.1",
    "@polkadot/ts": "^0.4.22",
    "@polkadot/types": "^8.3.1",
    "@polkadot/types-support": "^8.3.1",
    "@polkadot/util": "^10.0.1",
    "@polkadot/util-crypto": "^10.0.1",
    "next": "12.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "@types/node": "18.0.1",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4",
    "typescript": "4.7.4"
  }
}

New package.json

{
  "name": "fillper_frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@polkadot/api": "latest",
    "@polkadot/api-contract": "latest",
    "@polkadot/extension-dapp": "latest",
    "@polkadot/ts": "latest",
    "@polkadot/types": "latest",
    "@polkadot/types-support": "latest",
    "@polkadot/util": "latest",
    "@polkadot/util-crypto": "latest",
    "next": "12.2.0",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0"
  },
  "devDependencies": {
    "@types/node": "18.0.1",
    "@types/react": "18.0.14",
    "@types/react-dom": "18.0.5",
    "autoprefixer": "^10.4.7",
    "eslint": "8.19.0",
    "eslint-config-next": "12.2.0",
    "postcss": "^8.4.14",
    "tailwindcss": "^3.1.4",
    "typescript": "4.7.4"
  }
}

Polkadot.js "signAndSend" function causes "signer" option to compile error

1 Answers1