3

Issue Description

I followed all the steps mentioned in the documentation Full Stack Solana development with React and Anchor: https://solana.com/developers/guides/getstarted/full-stack-solana-development project. Everything worked smoothly until I reached the frontend part.

Problem 1: IDL File

In the documentation, it instructs to create a new folder named anchor in front-end/src and copy over target/types/counter.ts (from the Anchor program) to a new file called idl.ts. The purpose of this step is to use the IDL to create TypeScript objects for interacting with the program.

However, when I opened target/types/counter.ts, I found that it's different from what was expected. It contains additional content, and the line export const IDL: Counter = { ... } is missing. My counter.ts was like:


```typescript
/**
 * Program IDL in camelCase format in order to be used in JS/TS.
 *
 * Note that this is only a type helper and is not the actual IDL. The original
 * IDL can be found at `target/idl/counter.json`.
 */
export type Counter = {
    "address": "2FcNSYHzEP7gXYZA4YMfiznRVAj7JpZF8Z4fWL7xw9jK",
    "metadata": {
        "name": "counter",
        "version": "0.1.0",
        "spec": "0.1.0",
        "description": "Created with Anchor"
    },
    "instructions": [
        {
            "name": "increment",
            "discriminator": [
                11,
                18,
                104,
                9,
                104,
                174,
                59,
                33
            ],
            "accounts": [
                {
                    "name": "counter",
                    "writable": true,
                    "pda": {
                        "seeds": [
                            {
                                "kind": "const",
                                "value": [
                                    99,
                                    111,
                                    117,
                                    110,
                                    116,
                                    101,
                                    114
                                ]
                            }
                        ]
                    }
                }
            ],
            "args": []
        },
        {
            "name": "initialize",
            "discriminator": [
                175,
                175,
                109,
                31,
                13,
                152,
                155,
                237
            ],
            "accounts": [
                {
                    "name": "user",
                    "writable": true,
                    "signer": true
                },
                {
                    "name": "counter",
                    "writable": true,
                    "pda": {
                        "seeds": [
                            {
                                "kind": "const",
                                "value": [
                                    99,
                                    111,
                                    117,
                                    110,
                                    116,
                                    101,
                                    114
                                ]
                            }
                        ]
                    }
                },
                {
                    "name": "systemProgram",
                    "address": "11111111111111111111111111111111"
                }
            ],
            "args": []
        }
    ],
    "accounts": [
        {
            "name": "counter",
            "discriminator": [
                255,
                176,
                4,
                245,
                188,
                253,
                124,
                25
            ]
        }
    ],
    "types": [
        {
            "name": "counter",
            "type": {
                "kind": "struct",
                "fields": [
                    {
                        "name": "count",
                        "type": "u64"
                    },
                    {
                        "name": "bump",
                        "type": "u8"
                    }
                ]
            }
        }
    ]
};

Problem 2: Error in setup.js

After adding the setup.js file, which looks like this:

import { IdlAccounts, Program } from "@coral-xyz/anchor";
import { IDL, Counter } from "./idl";
import { clusterApiUrl, Connection, PublicKey } from "@solana/web3.js";

const programId = new PublicKey("2FcNSYHzEP7gXYZA4YMfiznRVAj7JpZF8Z4fWL7xw9jK");
const connection = new Connection(clusterApiUrl("devnet"), "confirmed");

export const program = new Program<Counter>(IDL, programId, {
  connection,
});

export const [mintPDA] = PublicKey.findProgramAddressSync(
  [Buffer.from("mint")],
  program.programId,
);

export const [counterPDA] = PublicKey.findProgramAddressSync(
  [Buffer.from("counter")],
  program.programId,
);

export type CounterData = IdlAccounts<Counter>["counter"];

I encountered an error at the line export const program = new Program<Counter>(IDL, programId, { connection, });, which says:

Argument of type 'PublicKey' is not assignable to parameter of type 'Provider'.
Property 'connection' is missing in type 'PublicKey' but required in type 'Provider'.

Problem 3: Error in Frontend

Following the subsequent steps and adding <CounterState/> in App.tsx, I encountered an error in the frontend console:

Uncaught TypeError: Cannot read properties of undefined (reading 'size')
    at new AccountClient (@coral-xyz_anchor.js?v=7e705056:10404:39)
    at @coral-xyz_anchor.js?v=7e705056:10369:30
    at Array.reduce (<anonymous>)
    at AccountFactory.build (@coral-xyz_anchor.js?v=7e705056:10368:70)
    at NamespaceFactory.build (@coral-xyz_anchor.js?v=7e705056:11480:51)
    at new _Program (@coral-xyz_anchor.js?v=7e705056:11560:98)
    at setup.ts:10:24

Steps Taken

  • Followed all steps mentioned in the documentation and video.
  • Checked for typos and ensured correct file placements.
  • Reviewed code for any missing or incorrect configurations.

Additional Information

  • Operating System: Windows(using WSL)
  • solana --version; node -v; yarn --version; anchor --version solana-cli 1.18.9 (src:9a7dd9ca; feat:3469865029, client:SolanaLabs) v20.8.0 1.22.22 anchor-cli 0.30.0


  [1]: https://solana.com/developers/guides/getstarted/full-stack-solana-development
1
  • This question is good, but should be handled as 3 separate issues.
    – mikemaccana
    Commented Jun 11 at 18:14

2 Answers 2

1

Could you try replacing the last argument with an instance of an anchor provider?

provider initialization might looks something like this on an anchor project

anchor.AnchorProvider.env().wallet as anchor.Wallet;

export const provider = new anchor.AnchorProvider(
    connection,
    payer, 
    anchor.AnchorProvider.defaultOptions()
);

This is what the class constructor looks like and as you can see there isn't a parameter for the connection

enter image description here

code https://github.com/coral-xyz/anchor/blob/master/ts/packages/anchor/src/program/index.ts#L32

0

This works for me const program = new anchor.Program(idl, provider);

Not the answer you're looking for? Browse other questions tagged or ask your own question.