Attempted import error: 'Wallet' is not exported from '@project-serum/anchor'

Question

Trying to import the Wallet class but getting error in title at runtime. This issue apparently should have been fixed in v0.21+ but it doesn't appear to work in my codebase.

Using nextjs v11.0.1 and @project-serum/anchor v0.23.0

Relevant snippet from index.tsx

import { Provider, Program, Wallet } from '@project-serum/anchor';
import { Keypair } from '@solana/web3.js';

const Page = () => {
 const testWallet = new Wallet(Keypair.generate());
 return <div></div>;
}

The above snippet DOES work when using @project-serum/anchor v0.16.2

next.config.js

const path = require('path');
const withTM = require('next-transpile-modules')([
  '@blocto/sdk',
  '@project-serum/sol-wallet-adapter',
  '@solana/wallet-........,
]);

module.exports = withTM({
  target: 'serverless',
  distDir: 'build',
  trailingSlash: true,
  webpack5: false,
  webpack(config) {
    config.module.rules.push(
      {
        test: /\.svg$/,
        issuer: {
          test: /\.(js|ts)x?$/,
        },
        use: ['@svgr/webpack'],
      },
      {
        test: /\.png$/,
        issuer: {
          test: /\.(js|ts)x?$/,
        },
        use: ['file-loader'],
      },
      {
        test: /\.mjs$/,
        include: /node_modules/,
        type: 'javascript/auto',
      },
    );
    config.resolve.alias = {
      ...config.resolve.alias,
      assets: path.resolve(__dirname, './public/assets'),
    };
    config.node = {
      fs: 'empty',
    };

    return config;
  },
});

tsconfig.json

{
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "baseUrl": "./src",
    "module": "esnext",
    "paths": {
      "assets/*": ["./public/assets/*"],
      "@solana/*": ["./node_modules/@solana/*"]
    },
    "incremental": true
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

Answer 1

Hmm, not exactly sure if this is the same issue I had, but you can try to just re-create the Wallet type locally and imports it.

Looks like this for me

export class MyWallet implements Wallet {

    constructor(readonly payer: Keypair) {
        this.payer = payer
    }

    async signTransaction(tx: Transaction): Promise<Transaction> {
        tx.partialSign(this.payer);
        return tx;
    }

    async signAllTransactions(txs: Transaction[]): Promise<Transaction[]> {
        return txs.map((t) => {
            t.partialSign(this.payer);
            return t;
        });
    }

    get publicKey(): PublicKey {
        return this.payer.publicKey;
    }
}