How to dynamically import clusterApiUrl in next js

Question

I want to dynamically import clusterApiUrl from "@solana/web3.js" using next/dynamic, but I get an error "clusterApiUrl is not a function".

This is how I import it:

const clusterApiUrl = dynamic(
  () => import("@solana/web3.js").then((mod) => mod.clusterApiUrl ),
  {
    ssr: false,
  }
);

and I use clusterApiUrl like this: const endpoint = useMemo(() => clusterApiUrl(network), [network]); I'm trying to reduce my bundle size

Answer 1

You can use the same principle to import external libraries using import() at the point where that module is needed. Architect your code such that clusterApiUrl is only needed in a codepath that's inaccessible to the server renderer (eg. in an effect, or an event handler).

See ‘with external libraries’ in the Next.js ‘dynamic imports’ documentation.

Answer 2

this is the typescript signature of next.js dynamic

function dynamic<P = {}>(dynamicOptions: DynamicOptions<P> | Loader<P>, options?: DynamicOptions<P>)
                     // this is the return value
                     : React.ComponentType<P>

it should return a React component. You could try this

export const WrapperComponent = (props) => {
  // Make instance here 
  const clusterApi = useMemo(() => clusterApiUrl,[]);  

  // Do whatever you want here with the clusterApi

  return <div>Something</div>;
}

then dynamically import the WrapperComponent