WalletSendTransactionError: failed to get recent blockhash: TypeError: Failed to fetch

[billyjacoby]

Describe the bug
Unable to send any transactions using multiple wallet adapters - Slope and Phantom tried.

Unable to even get latestBlockhash from devnet or testenet when trying to create a simple test transaction

To Reproduce
Steps to reproduce the behavior:

Here is a public repo that has a barebones React app created that shows the issue:
https://github.com/billyjacoby/solana-tx-issue

Expected behavior
I can make transactions using wallet-adapters

Desktop (please complete the following information):

• OS: macOS
• Browser Brave

Additional context
Add any other context about the problem here.

[jordaaash]

Talk to a Solana Support on the Live support page so that your issue can be looked into.

Don't follow any support links. There is no Solana Support, this is a scam.

[billyjacoby]

Talk to a Solana Support on the Live support page so that your issue can be looked into.

Don't follow any support links. The is no Solana Support, this is a scam.

Thanks, it didn’t look legit lol.

Any idea what could be causing this issue? Could it maybe something with React 18?

[jordaaash]

Does the starter example work for you? https://solana-labs.github.io/wallet-adapter/example/

[billyjacoby]

Yeah, and I’ve built a number of other apps before that work but when starting a new project this issue persists now.

I linked a barebones repo showing the problem

[jordaaash]

Oh, I looked at your reproduction repo. The problem is that CRA doesn't work out of the box with ESM projects that don't polyfill Node deps.

Check out the CRA starter project we ship: https://github.com/solana-labs/wallet-adapter/tree/master/packages/starter/create-react-app-starter

It includes the config you need.

[jordaaash]

I can't say 100% that this is the only issue, but it's definitely going to cause a problem, so if the example works, it's likely the project build config.

[billyjacoby]

I was using craco to polyfill the node dependencies, i may have forgotten to include the craco files in the repo i linked.

I’m getting the same Failed to fetch error with or without node deps being polyfilled though.

[jordaaash]

Unfortunately I can only see from your reproduction repo that it's using CRA without Craco or react-app-rewired: https://github.com/billyjacoby/solana-tx-issue/blob/d59b88ff7da9246da961113dc903d426f272c9bb/package.json#L28-L33

Additionally, I just added this component (derived from the example project) to the create-react-app-starter project that uses react-app-rewired:

import { useConnection, useWallet } from '@solana/wallet-adapter-react';
import { PublicKey, Transaction, TransactionInstruction, TransactionSignature } from '@solana/web3.js';
import { FC, useCallback } from 'react';

export const SendTransaction: FC = () => {
    const { connection } = useConnection();
    const { publicKey, sendTransaction } = useWallet();

    const onClick = useCallback(async () => {
        if (!publicKey) {
            console.error('error', 'Wallet not connected!');
            return;
        }

        let signature: TransactionSignature = '';
        try {
            const transaction = new Transaction().add(
                new TransactionInstruction({
                    data: Buffer.from('Hello, from the Solana Wallet Adapter example app!'),
                    keys: [],
                    programId: new PublicKey('MemoSq4gqABAXKb96qnH8TysNcWxMyWCqXgDLGmfcHr'),
                })
            );

            signature = await sendTransaction(transaction, connection);
            console.info('info', 'Transaction sent:', signature);

            await connection.confirmTransaction(signature, 'processed');
            console.info('success', 'Transaction successful!', signature);
        } catch (error: any) {
            console.error('error', `Transaction failed! ${error?.message}`, signature);
            return;
        }
    }, [publicKey, connection, sendTransaction]);

    return (
        <button onClick={onClick} disabled={!publicKey}>
            Send Transaction (devnet)
        </button>
    );
};

It works:

Because the example works and the CRA starter project works, I'm going to close this issue. It appears to be a problem with your project's configuration.

If you find out it's an issue with Brave instead, please let me know. But if the example project works for you in Brave, then it's almost certainly a project config issue.

[billyjacoby]

Just updated my repo to include the proper Craco config. Can you confirm that if you clone the repo it works for you? @jordansexton

[jordaaash]

I'm looking @ https://github.com/billyjacoby/solana-tx-issue and it doesn't depend on Craco or have any config for it.

[billyjacoby]

I copy and pasted the example you provided as well with the same results: https://github.com/billyjacoby/solana-tx-issue

[billyjacoby]

Maybe fetch and pull, its definitely here:
https://github.com/billyjacoby/solana-tx-issue/blob/b44e8098d93f22a98562c075f607973071323baa/package.json#L19

https://github.com/billyjacoby/solana-tx-issue/blob/main/craco.config.js

[jordaaash]

Looks like Github just updated.

You're not importing Wallet.tsx and placing it as a context provider around your App: https://github.com/billyjacoby/solana-tx-issue/blob/main/src/App.tsx

[jordaaash]

Please just use the starter project provided. I promise you it works.

[billyjacoby]

Looks like Github just updated.

You're not importing Wallet.tsx and placing it as a context provider around your App: https://github.com/billyjacoby/solana-tx-issue/blob/main/src/App.tsx

I am though: https://github.com/billyjacoby/solana-tx-issue/blob/b44e8098d93f22a98562c075f607973071323baa/src/index.tsx#L12

[jordaaash]

https://github.com/dilanx/craco

ℹ️ The latest CRACO release does not support CRA 5, but alpha builds will be regularly released over the next few days. Keep up to date with our progress dilanx/craco#426.

[jordaaash]

Craco doesn't work with CRA 5, and CRA 4 doesn't handle ESM imports properly.

All of this is avoided by using one of the provided starter projects.

[jordaaash]

Also, what the heck: https://github.com/billyjacoby/solana-tx-issue/blob/b44e8098d93f22a98562c075f607973071323baa/package.json#L19

You're depending on craco version... 0.0.3?

Craco is on version 6.4.4

You have the wrong package. The correct one is @craco/craco.

[billyjacoby]

That is weird, idk why its relying on that version there.

I'm getting the exact same error with the starter. Pushing to repo now

[billyjacoby]

https://github.com/billyjacoby/solana-CRA-issue

This is a CRA copied right from the starter provided with the SendTransaction code from above included and I'm getting the same errors.

[billyjacoby]

No blockhash found with the example from the repo, getting the same error when manually adding a blockhash too.

[billyjacoby]

Actually this looks like it might be an issue with Phantom. In both repos i was able to send the transaction using Slope just now, though I tried this the other day and was unable to.

[jordaaash]

Yep, I just cloned that repo and it works fine.

git clone https://github.com/billyjacoby/solana-CRA-issue.git
cd solana-CRA-issue
yarn
yarn start

UI:

Console:

Transaction:
https://explorer.solana.com/tx/5CcvcAz99scu2BXoZkv4gHqn2GLqZp25kShpmXarbMDZubepUTtRzfsaQxzRzNJrVhCBe6sj93Tiz6N8FmNtN2Q?cluster=devnet

This is in Firefox with Phantom.

[jordaaash]

Do you not have Phantom set to use devnet? Because that will do this.

[billyjacoby]

Ahhhhh that's it exactly. That makes it work with the starter repo. I did try that with the other repo and was getting the same results but it seems like that was probably a Craco issue.

It's been a few months since I've been developing on Solana, I don't think Phantom used to care what network you were on when sending a transaction which i always thought was a bit dangerous so I'm glad to see that's not possible anymore.

As always, thanks a ton for your help Jordan!

[jordaaash]

It's possible that's because of this change: 67df674

We always set the recent blockhash and fee payer, even if the wallet wants to change them. Perhaps Phantom was being loose when it was empty and defaulting to whatever the hash was on the currently selected cluster.

[chen4903]

I encountered the same problem in this code:

const { Connection } = require("@solana/web3.js");

async function test(){
    let url = 'https://api.devnet.solana.com';
    let rpcConnection = new Connection(url);
    console.log("test");
    let latestBlockhash = await rpcConnection.getLatestBlockhash('finalized');
    console.log("✅ - Fetched latest blockhash. Last Valid Height:", latestBlockhash.lastValidBlockHeight);
}

test()

the output:

levi@LEVI-104-PC:/opt/solana/web3js_test$ node /opt/solana/web3js_test/test.js 
test
/opt/solana/web3js_test/node_modules/@solana/web3.js/lib/index.cjs.js:7066
      throw new Error('failed to get recent blockhash: ' + e);
            ^

Error: failed to get recent blockhash: TypeError: fetch failed
    at Connection.getLatestBlockhash (/opt/solana/web3js_test/node_modules/@solana/web3.js/lib/index.cjs.js:7066:13)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async test (/opt/solana/web3js_test/test.js:7:27)

Node.js v20.11.0

I use wsl2, ubuntu 20.04. What I miss?