Errors when using `@project-serum/anchor` with Next.js v14 using Webpack 5

Question

I am sharing my useWalletHook.tsx file:

"use client";

import { Program, AnchorProvider } from "@project-serum/anchor";

import {
  useConnection,
  useWallet as useAdapterWallet,
  useAnchorWallet,
  WalletContextState,
  AnchorWallet,
} from "@solana/wallet-adapter-react";

import { Connection, PublicKey } from "@solana/web3.js";

import idl from "../../../target/idl/true_news.json";


const programID = new PublicKey(idl.metadata.address);

export const useWalletHook = (): {
  connection: Connection;
  adapterWalletObj: WalletContextState;
  anchorWalletObj: AnchorWallet | undefined;
  provider: AnchorProvider;
  program: Program;
} => {
    const { connection } = useConnection();

    const adapterWalletObj = useAdapterWallet();
    const anchorWalletObj = useAnchorWallet();

    const provider = new AnchorProvider(connection, adapterWalletObj, {})
    const program = new Program(idl, programID, provider);

   return {
    connection,
    adapterWalletObj,
    anchorWalletObj,
    provider,
    program,
  };
};

export default useWalletHook;

In these two lines:

    const provider = new AnchorProvider(connection, adapterWalletObj, {})
    const program = new Program(idl, programID, provider);

The editor is showing the errors below:

For the first line:

Argument of type 'WalletContextState' is not assignable to parameter of type  
'Wallet'.                                                                     
  Types of property 'signTransaction' are incompatible.                       
    Type '(<T extends Transaction | VersionedTransaction>(transaction: T) =>  
Promise<T>) | undefined' is not assignable to type '(tx: Transaction) =>      
Promise<Transaction>'.                                                        
      Type 'undefined' is not assignable to type '(tx: Transaction) =>        
Promise<Transaction>'. (tsserver 2345)   

For the second line:

Argument of type '{ version: string; name: string; instructions: { name:    
string; accounts: { name: string; isMut: boolean; isSigner: boolean; }[];   
args: { name: string; type: string; }[]; }[]; accounts: { name: string; type
{ kind: string; fields: { ...; }[]; }; }[]; errors: { ...; }[]; metadata:   
{ ...; }; }' is not assignable to parameter of type 'Idl'.                  
  Types of property 'instructions' are incompatible.                        
    Type '{ name: string; accounts: { name: string; isMut: boolean; isSigner
boolean; }[]; args: { name: string; type: string; }[]; }[]' is not assignabl
to type 'IdlInstruction[]'.                                                 
      Type '{ name: string; accounts: { name: string; isMut: boolean;       
isSigner: boolean; }[]; args: { name: string; type: string; }[]; }' is not  
assignable to type 'IdlInstruction'.                                        
        Types of property 'args' are incompatible.                          
          Type '{ name: string; type: string; }[]' is not assignable to type
'IdlField[]'.                                                               
            Type '{ name: string; type: string; }' is not assignable to type
'IdlField'.                                                                 
              Types of property 'type' are incompatible.                    
                Type 'string' is not assignable to type 'IdlType'. (tsserver
2345)                                                                       

Then I checked the @project-serum/anchor official site note (below)

@project-serum/anchor depends on Node.js native modules. Therefore, Webpack 5 will not work with the current version. You will either need to rollback to Webpack 4 or use a polyfill for each missing dependency.

Since Next.js 14 is using Webpack 5 by default, what would be the best possible solution? Thanks in advance.

Answer 1

You don't need to roll back to previous versions. NextJS allows you to opt out of bundling packages that use NodeJS features.

Add the following to your nextjs.config.mjs:

experimental: {
  serverComponentsExternalPackages: ["@coral-xyz/anchor"],
},

More info: https://nextjs.org/docs/app/api-reference/next-config-js/serverComponentsExternalPackages