PrepareTransaction returns an error: TypeError: expected a 'Transaction', got: [object Object]

[jsmaxi]

Describe the bug
Installed and integrated @stellar/stellar-sdk package to my Nextjs project to test calling of contract's functions from the UI. However, calling prepareTransaction returns an error "TypeError: expected a 'Transaction', got: [object Object]". Please investigate what is wrong here.
Link to the example contract used: https://github.com/stellar/soroban-examples/blob/main/events/src/lib.rs

Nextjs:

import {
  BASE_FEE,
  Contract,
  Networks,
  Transaction,
  TransactionBuilder,
} from "@stellar/stellar-sdk";
import { Server } from "@stellar/stellar-sdk/rpc";
...
const publicKey = "..."; // paste key
const account = await server.getAccount(publicKey);
const server = new Server(https://soroban-testnet.stellar.org:443);
const contract = new Contract("...id"); // paste id
const transaction = new TransactionBuilder(account, {
        fee: BASE_FEE,
      })
        .setNetworkPassphrase(Networks.TESTNET)
        .setTimeout(TIMEOUT_SEC)
        .addOperation(contract.call("increment"))
        .build();
const preparedTransaction = await server.prepareTransaction(transaction);

What version are you on?
"@stellar/stellar-sdk": "^13.1.0"
"@stellar/freighter-api": "^4.0.0"

To Reproduce
Steps to reproduce the behavior:

• Build and deploy the example contract (https://github.com/stellar/soroban-examples/blob/main/events/src/lib.rs).

• Create or use any Nextjs project.

• Install stellar sdk and freighter api dependencies mentioned above (the newest versions).

• Create a new functional react component and paste the code snipped to call function "prepareTransaction".

• Run the local server (npm run dev), open https://localhost:3000 and trigger "prepareTransaction".

• Catch and observe the error in browser's console: "TypeError: expected a 'Transaction', got: [object Object]".

• Also, make sure that simulateTransaction, signTransaction, sendTransaction functions work!

Expected behavior
Functions prepareTransaction, simulateTransaction, signTransaction, sendTransaction should work fine, unless something is wrong here. The code is similar to your example, so the transaction type and object should be accepted here. Besides, the error message could be more descriptive and help trace the issue.

Additional context

[jsmaxi]

Note. The issue is only reproducible with the newest version of sdk package.
As a workaround, downgrade to "@stellar/stellar-sdk": "12.0.0".

[silence48]

Any chance you can share a repo with this issue so i can reproduce it? I am using stellar-sdk 13 on next js 15 but i've used it also on 14.I see your example contract but can you show me the example page and route from your nextjs app I'd love to try to figure out why it works in 12 not 13. Are you sure you imported sorobanrpc properly because the way it imports is different iirc

[jsmaxi]

@silence48 You are right, managed to solve the issue by splitting the code into server (prepare and send) and client (sign) actions.
Repository: https://github.com/jsmaxi/stellar-sdk-issue

[silence48]

@silence48 You are right, managed to solve the issue by splitting the code into server (prepare and send) and client (sign) actions. Repository: https://github.com/jsmaxi/stellar-sdk-issue

Glad to hear it worked!

[KoxyG]

@silence48 and @jsmaxi i am having similar issues but mine is related to the fact that I am interacting on the server nestjs.

[jsmaxi]

@KoxyG Would it be possible for you to share your code repository example?

[KoxyG]

@KoxyG Would it be possible for you to share your code repository example?

Yes, this is it https://github.com/fastbuka/api.fastbuka.com/blob/koxy/src/payment/payment.service.ts
you can star from line 133