Issue While connecting Frontend

[Ajitchy]

Issue Description

I followed all the steps mentioned in the documentation and watched your YouTube video to create a "FullStack Solana development with React and Anchor" 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

[lostintime101]

Your first issue may be due to a breaking change in Anchor IDLs. Read more here. I was able to fix a similar issue by ensuring the version of Anchor in anchor.toml on the backend matched that in package.json for the frontend.

[Ajitchy]

In my case, the frontend and backend have the same version of Anchor.

[adlonymous]

Same issue here, I tried switching back to Anchor 0.29.0 and that brought up different issues since the generated IDL was different

[CryptoCooker]

Same issue here.
coral-xyz/anchor#2914 (comment)

[AlmostEfficient]

All your problems are related to using Anchor 0.30, which had a bunch of breaking changes. I suggest completing the project with 0.29 instead. I'll temporarily sticky the guide to 0.29 and update it to 0.30 when I've fixed all the new issues.

Run avm use 0.29 and yarn add @coral-xyz/anchor@0.29. Make sure Anchor is on v0.29 in your CLI, counter, AND front-end. You'll have to start over with the contract but you can reuse the front-end.

Problem 1: IDL File

0.30 separates the types and the IDL. Instead of just making a types file, you'd copy over:

1. /target/idl/counter.json
2. /target/types/counter.ts

Put these in front-end/src/anchor and use them like this:

import * as idl from "./counter.json";
import type { Counter } from "./counter";

Problem 2: Error in setup.js

When creating a program interface in Anchor 0.30, you can't add programId anymore

You'd just do sth like

export const program = new Program(idl, provider);

But I haven't gotten this to work yet cuz provider is breaking.

Problem 3: Error in Frontend

Likely related to the IDL changes in v0.30 but I can't confirm.

[AlmostEfficient]

Same issue here, I tried switching back to Anchor 0.29.0 and that brought up different issues since the generated IDL was different

@adlonymous see above. You need to have 0.29 in all three places.

[ilyacherevkov]

Pretty sure, I'm using 0.29.0, but I get in the browser console:

setup.ts:15 Uncaught ReferenceError: Buffer is not defined
    at setup.ts:15:4

[ilyacherevkov]

Added this into setup.ts and it appears to work now:

in setup.ts

import { Buffer } from "buffer"
import * as process from "process"

globalThis.Buffer = Buffer as unknown as BufferConstructor;
globalThis.process = process as unknown as NodeJS.Process;

in vite.config.ts:

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
        buffer: 'buffer/',
    },
  },
})

Edit:
It helped for reading, but writing results in the following error:

Error: Invalid arguments: counter not provided.
    at @coral-xyz_anchor.js?v=50f92474:6473:15
    at Array.forEach (<anonymous>)
    at validateAccounts (@coral-xyz_anchor.js?v=50f92474:6468:14)
    at ix (@coral-xyz_anchor.js?v=50f92474:10063:7)
    at MethodsBuilder.txFn [as _txFn] (@coral-xyz_anchor.js?v=50f92474:10125:14)
    at MethodsBuilder.transaction (@coral-xyz_anchor.js?v=50f92474:11242:17)
    at async onClick (increment-button.tsx:17:27)

Edit 2:
For some reason my idl.ts missed the part with pda.

"pda": {
            "seeds": [
...

Probalby it's due to the fact I downgraded anchor version without reinitialising the Program. But after I copied idl.ts from repo write to blockchain started working as expected.

[gameuser1982]

You'd just do sth like

export const program = new Program(idl, provider);

But I haven't gotten this to work yet cuz provider is breaking.

Problem 3: Error in Frontend

Likely related to the IDL changes in v0.30 but I can't confirm.

Change Provider To AnchorProvider to fix Provider breaking:

https://coral-xyz.github.io/anchor/ts/classes/AnchorProvider.html

Let me know if that fixes it for you cause I'm still working on figuring out the idl and typescript changes in Anchor 0.30.0. Why do they do stuff like rename functions and classes and make breaking idl changes? I hate it. I've been trying to get my frontend to work for 3 weeks now, meanwhile the on chain Rust / Anchor side has been really smooth for me when it comes to cross compiling into bytecode, deploying on to localnet and finally doing Anchor Tests.